// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

const copy = {
  bind(el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) {
        // 值為空的時候，給出提示。可根據項目UI仔細設計
        console.log('無復制內容')
        return
      }
      // 動態(tài)創(chuàng)建 textarea 標簽
      const textarea = document.createElement('textarea')
      // 將該 textarea 設為 readonly 防止 iOS 下自動喚起鍵盤，同時將 textarea 移出可視區(qū)域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 將要 copy 的值賦給 textarea 標簽的 value 屬性
      textarea.value = el.$value
      // 將 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 選中值并復制
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) {
        console.log('復制成功') // 可根據項目UI仔細設計
      }
      document.body.removeChild(textarea)
    }
    // 綁定點擊事件，就是所謂的一鍵 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 當傳進來的值更新的時候觸發(fā)
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令與元素解綁的時候，移除事件綁定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}
export default copy

import copy from './copy'
// 自定義指令
const directives = {
  copy,
}
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  },

import Vue from 'vue'
import Directives from '@/directive'
Vue.use(Directives)