插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:
-
添加全局方法或者 property。如:vue-custom-element
-
添加全局资源:指令/过滤器/过渡等。如 vue-touch
-
通过全局混入来添加一些组件选项。如 vue-router
-
添加 Vue 实例方法,通过把它们添加到
Vue.prototype
上实现。 -
一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router
代码示例:
import directive from './directive' // 自定义指令
import mixin from './mixin' // 混入
import filter from './filter' // 过滤器
import { ElementUI, VueCodemirror, md5, echarts, axios } from './package' // 组件
const dayjs = require('dayjs')
const setup = {
install (Vue) {
Vue.use(directive)
Vue.use(mixin)
Vue.use(filter)
Vue.use(ElementUI)
// Vue.component('chart', VueECharts)
Vue.use(VueCodemirror /* {
options: { theme: 'base16-dark', ... },
events: ['scroll', ...]
} */)
Vue.prototype.$dayjs = dayjs // vue 实例方法
Vue.prototype.$echarts = echarts
Vue.prototype.$http = axios
Vue.prototype.$md5 = md5
}
}
export default setup
1.1 自定义指令
代码
let loadmore = {
bind (el, binding) {
var p = 0; var t = 0; var down = true
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-table__body-wrapper')
SELECTWRAP_DOM.addEventListener('scroll', function () {
// 判断是否向下滚动
p = this.scrollTop
if (t < p) {
down = true
} else {
down = false
}
t = p
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
if (CONDITION && down) {
binding.value()
}
})
}
}
export default {
install (Vue) {
Vue.directive('loadmore', loadmore)
}
}
混入
代码
import Vue from 'vue'
import * as api from '@/api'
window.EventBus = new Vue()
let mixin = {
created () {
this.bus = window.EventBus
this.api = api
},
methods: {
/* debounce (cb) {
cb()
} */
}
}
export default {
install (Vue) {
Vue.mixin(mixin)
}
}
过滤器
代码
/**
* 相识度过滤
*/
function percentage (value) {
if (!value) return 0
value = (value * 100).toFixed(0)
return parseInt(value)
}
/**
* 客户状态过滤
* @param {*} date
* @param {*} fmt
* @returns
*/
function customerStatusFilter (value, type) {
let status, color
switch (parseInt(value)) {
case 1:
status = '待认证'
color = ''
break
case 2:
status = '认证通过'
color = 'success'
break
case 3:
status = '不通过'
color = 'warning'
break
case 4:
status = '未发起'
color = 'info'
break
default:
status = '--'
color = ''
break
}
if (type === 'status') {
return status
} else {
return color
}
}
/**
* 订单状态过滤
* @param {*} date
* @param {*} fmt
* @returns
*/
function orderStatusFilter (value, type) {
let status, color
switch (parseInt(value)) {
case 0:
status = '已预约'
color = 'info'
break
case 1:
status = '车辆进厂'
color = 'warn'
break
case 2:
status = '车辆进厂'
color = 'warn'
break
case 3:
status = '车辆进厂'
color = 'warn'
break
case 4:
status = '车辆进厂'
color = 'warn'
break
case 5:
status = '车辆进厂'
color = 'warn'
break
case 6:
status = '车辆出厂'
color = 'warn'
break
case 7:
status = '已完成'
color = 'success'
break
case -1:
status = '已作废'
color = 'cancel'
break
default:
status = ''
color = ''
break
}
if (type === 'status') {
return status
} else {
return color
}
}
/**
* 报警类型过滤
* @param {*} date
* @param {*} fmt
* @returns
*/
function alarmTypeFilter (value) {
let type
switch (parseInt(value)) {
case 1:
type = '周界入侵'
break
case 2:
type = '矿区盗挖'
break
case 3:
type = '产区落石'
break
case 4:
type = '未戴安全帽'
break
default:
type = '--'
break
}
return type
}
/**
* 时间过滤
*/
function formateTime (date, fmt) {
if (/\-/.test(date)) {
date = date.replace(/-/g, '/') // 兼容IE safari
}
date = new Date(date)
let ret
const opt = {
'y+': date.getFullYear().toString(), // 年
'm+': (date.getMonth() + 1).toString(), // 月
'd+': date.getDate().toString(), // 日
'H+': date.getHours().toString(), // 时
'M+': date.getMinutes().toString(), // 分
'S+': date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加,必须转化成字符串
}
for (let k in opt) {
ret = new RegExp('(' + k + ')').exec(fmt)
if (ret) {
fmt = fmt.replace(
ret[1],
ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
)
}
}
return fmt
}
let dayjs = require('dayjs')
function formatDaytimeByPattern (datetime, fmt) {
if (datetime) {
return dayjs(datetime).format(fmt)
} else {
return '-'
}
}
function formatDay (datetime) {
return formatDaytimeByPattern(datetime, 'YYYY-MM-DD')
}
function formatTime (datetime) {
return formatDaytimeByPattern(datetime, 'HH:mm:ss')
}
function formatDaytime (datetime) {
return formatDaytimeByPattern(datetime, 'YYYY-MM-DD HH:mm:ss')
}
export default {
install (Vue) {
Vue.filter('percentage', percentage)
Vue.filter('formatDay', formatDay)
Vue.filter('formatTime', formatTime)
Vue.filter('formatDaytime', formatDaytime)
Vue.filter('formateTime', formateTime)
Vue.filter('customerStatusFilter', customerStatusFilter)
Vue.filter('orderStatusFilter', orderStatusFilter)
Vue.filter('alarmTypeFilter',alarmTypeFilter)
}
}
引入的组件
代码
import ElementUI from 'element-ui'
import VueCodemirror from 'vue-codemirror'
// import VueECharts from 'vue-echarts'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/iconfont/iconfont.css'
import 'codemirror/lib/codemirror.css'
import 'echarts/lib/chart/bar'
import md5 from 'js-md5'
import echarts from 'echarts'
import axios from 'axios'
export { ElementUI, VueCodemirror, /* VueECharts, */ md5, echarts, axios }
网友评论