分享我的项目基础库中几个常用的自定义指令

点击复制文本

基于 clipboard，使用前先 npm i clipboard --save

import Clipboard from 'clipboard'
import Vue from 'vue'

export const copy = {
  bind: (el, binding = {}, vNode) => {
    const clipboard = new Clipboard(el, {
      text: () => binding.value
    })
    const Message = Vue.prototype.$message // 项目里弹提示的控件
    clipboard.on('success', e => {
      Message.success('已复制到剪切板')
    })
    clipboard.on('error', e => {
      Message.error('复制失败')
    })
    if (el) {
      el.__clipboard__ = clipboard
      el.style.cursor = 'pointer'
      el.title = el.title || '点击复制'
      el.onmouseover = () => {
        el.style.color = '#00a8ff'
      }
      el.onmouseout = () => {
        el.style.color = ''
      }
    }
  },
  update: (el, binding, vNode) => {
    el.__clipboard__.text = () => binding.value
  },
  unbind: (el, binding) => {
    if (!el) return
    el.__clipboard__ && el.__clipboard__.destroy()
    delete el.__clipboard__
  }
}