vue文字復制指令 v-clipboard

近期項目中接到了復制文字到剪切板的需求，考慮到這種場景還挺多的，所以封裝成指令，方便移植到其他項目。

技術棧：vue@2.6.12、element-ui@2.13.2、clipboard@2.0.6。
clipboard是復制內容到剪切板的核心庫，使用方法也很簡單，下文會做簡單介紹。
element-ui是PC端常見的UI框架，這里主要用到了Icon和Popover組件，至於文字提示為什么沒用Tooltip組件，反而用Popover再調整成類似Tooltip的樣式，是因為Tooltip在指令中點擊后會自動隱藏，無法達到期望的效果。
期望：在要復制的文字后添加復制圖標，懸浮到圖標上顯示“復制”文字，復制成功后提示“復制成功”，重新移入圖標時顯示“復制”文字。如下圖效果

/* /style.index.css */
.icon-fuzhi {
  margin-left: 8px;
  padding: 2px;
  line-height: 18px;
  font-size: 18px;
}

.popper-fuzhi{
  padding: 4px;
  min-width: 0;
  background: #303133;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  transform: translate(0, 10px);
}
.popper-fuzhi.popper-fuzhi-translatex{
  transform: translate(-10px, 10px);
}

npm i clipboard -S

// /utils/directives.js
import Vue from 'vue'
import Clipboard from 'clipboard'

Vue.directive('clipboard', {
  bind(el, binding, vnode, oldVnode) {
    const vm = new Vue({
      el: document.createElement('span'),
      data() {
        return {
          content: '復制'
        }
      },
      computed: {
        popperClass: function () {
          let arr = ['popper-fuzhi']
          if(this.content == '復制成功'){
            arr.push('popper-fuzhi-translatex')
          }
          return arr.join(' ')
        }
      },
      methods: {
        handleAfterleave() {
          this.content = '復制'
        }
      },
      template: `
      <el-popover
        :content="content"
        placement="top" 
        trigger="hover"
        :visible-arrow="false"
        :popper-class="popperClass"
        @after-leave="handleAfterleave"
        :open-delay="200"
        ><i slot="reference" @click.stop.prevent class="el-icon-document-copy icon-fuzhi"></i>
      </el-popover>`
    })
    el.appendChild(vm.$el)
    console.log(vm.$el)
    let clipboard = new Clipboard(vm.$el.querySelector('.icon-fuzhi'), {
      text: function () {
        return el.innerText || ''
      }
    })
    clipboard.on('success', e => {
      vm.content = '復制成功'
    })
    clipboard.on('error', e => {
      
    })
  }
})

main.js入口引入css和js文件

// main.js
import './style/index.css'
import './utils/directives.js'

使用

<span v-clipboard>要復制的內容</span>