Vue---常用的第三方插件

1.富文本编辑器

vue-quill-editor
地址： 

https://github.com/surmon-china/vue-quill-editor#readme

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

2.进度条

nprogress
地址：

https://github.com/rstacruz/nprogress#readme

import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
    // 为每次请求添加请求拦截器,为请求头添加authorization属性
axios.interceptors.request.use((config) => {
    // console.log(config);
    nprogress.start()
    config.headers.Authorization = window.sessionStorage.getItem('token');
    return config;
})
axios.interceptors.response.use((config) => {
    nprogress.done()
    return config;
})

3.loadsh

一个一致性、模块化、高性能的 JavaScript 实用工具库

地址：

https://www.lodashjs.com/

import _ from 'lodash'
  const form = _.cloneDeep(this.addGoodsForm)

4.dayjs

时间相关的工具库

https://dayjs.fenxianglu.cn/

import dayjs from 'dayjs'
//加载中文语言包
import 'dayjs/locale/zh-cn'
// dayjs默认语言是英文，需要配置为中文
dayjs.locale('zh-cn') //全局使用
console.log(dayjs().format('YYYY-MM-DD'));

5.文本美化

github上搜索markdown-css，然后下载css文件

1.引入css文件

@import './github-markdown.css';

2.在文本的标签中加类名markdown-body

        <div
          class="article-content markdown-body"
          ref="articleContent"
          v-html="articles.content"
        ></div>

6.图片裁切工具

地址：

https://github.com/fengyuanchen/cropperjs

<template>
  <div class="total">
    <div class="img">
      <img :src="img" class="image" ref="img" />
    </div>
    <div class="buttom">
      <van-button type="primary" @click="$emit('close')">取消</van-button>
      <van-button type="primary" @click="onComfirm">确定</van-button>
    </div>
  </div>
</template>
<script>
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
import { updateUserPhoto } from '../../../api/user'
export default {
  name: 'HeimaiUpdatePhoto',

  data() {
    return {
      cropper: null
    };
  },
  props: {
    img: {
      type: [String, Object],
      require: true
    }
  },
  mounted() {
    const image = this.$refs.img
    this.cropper = new Cropper(image, {
      viewMode: 1, // 只能在裁剪的图片范围内移动
      dragMode: 'move', // 画布和图片都可以移动
      aspectRatio: 1, // 裁剪区默认正方形
      autoCropArea: 1, // 自动调整裁剪图片
      cropBoxMovable: false, // 禁止裁剪区移动
      cropBoxResizable: false, // 禁止裁剪区缩放
      background: false // 关闭默认背景
    })
  },

  methods: {
    onComfirm() {
      this.cropper.getCroppedCanvas().toBlob(async blob => {
        // console.log(blob);
        // 如果接口要求Content-Type是application/json
        // 则传递普通js对象
        // 如果接口要求Content-Type是multipart/form-data
        //  则必须传递FromDate对象
        const formData = new FormData()
        formData.append('photo', blob)
        const { data } = await updateUserPhoto(formData)
        this.$emit('close')
        this.$toast('修改头像成功！')
        this.$emit('update-photo', data.data.photo)
      })
    }
  }
};
</script>

<style lang="less" scoped>
.total {
  width: 100%;
  height: 100%;
  background-color: #000;
}
.img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.image {
  display: block;
  max-width: 100%;
}
/deep/.buttom {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  justify-content: space-between;
  color: #fff;
}
</style>