vue install 开发插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者 property。如：vue-custom-element

2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch

3. 通过全局混入来添加一些组件选项。如 vue-router

4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

5. 一个库，提供自己的 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, '/') // 兼容ＩＥ　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 }

作者：冰落寞成
链接：https://www.jianshu.com/p/0c8f1717865a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。