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 实用工具库
地址:
import _ from 'lodash'
const form = _.cloneDeep(this.addGoodsForm)
4.dayjs
时间相关的工具库
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>