vue中将插件 Clipboard.js封装为指令

使用方式：
 <span v-copy="我是要复制的内容">复制</span>

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

import Vant from 'vant'
import 'vant/lib/index.css'
// 引入自定义指令
import directives from '@/directives'

const app = createApp(App)
directives(app)
app.use(Vant)
  .use(router)
  .mount('#app')

// @/directives/index.js
import Clipboard from 'clipboard'
import { Toast } from 'vant';

function copyText(el) {
  const clipboard = new Clipboard(el);
  clipboard.on('success', function () {
    Toast.success('复制成功')
    clipboard.destroy();
  });
  clipboard.on('error', function () {
    Toast.success('复制失败')
  });
}

export default app => {
  app.directive('copy', {
    mounted(el, bidding) {
      // 配置 Clipboard 属性
      el.setAttribute('data-clipboard-text', bidding.value)
      // 解决第一次复制无法成功问题
      el.onmouseenter = () => copyText(el)
      // 进行复制
      el.onclick = () => copyText(el)
    }
  })
}

「感谢阅读，大家一起交流学习，新手小白请多指教！」