前端使用vue-clipboard2实现复制功能

需求

由于项目都是动态生成的，所以每个复制按钮要复制的内容也不一样， vue-clipboard2支持编程式复制，可以不修改html，所以采用vue-clipboard2

1.npm安装

npm install --save vue-clipboard2

2.在main.js引入

import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true
Vue.config.productionTip = false

3.在页面中使用

//这里的图片的循环遍历生成的，所以会有 'item'，不需要也可以不写，主要是需要做一个单击事件
<img src="#" alt="" @click="onCopyClick(item)">

    onCopyClick(item) {
      //copyData就是要复制的东西，由于节点都是遍历生成的，每个复制按钮要复制的东西是不一样的，
      //所以这里的copyData也不能写死，根据传过来的item，生成对应的copyData
      let copyData = `
        网址：${item.path}
        账号：${item.username}
        密码：${item.password}
      `
      
      this.$copyText(copyData).then(() => {

        //element ui的弹窗
        this.$message.success('已复制到剪贴板')

      }).catch(() => {
        this.$message.error('复制失败，请手动复制')
      })
    },