vue中实现点击一键复制功能，且不影响其他页面的复制粘贴功能

需求说明

1. 列表详情超出一定字符长度，省略号显示
2. 悬浮展示全部且能复制

问题及解决办法

1. 起初开发使用过滤器截取字符串展示省略号，使用元素自带的title属性展示全部
2. 要求能够复制，title无法实现，则使用复制功能
3. 在需要复制功能的后面增加icon图，点击复制

<span>
     <span :title="addDetailInfo.remark">{{ addDetailInfo.remark| ellipsis }}</span>
     <i class="el-icon-document-copy" style="cursor: pointer; color: #16aefa; margin-left: 5px；@click="copySystemInfo(addDetailInfo.remark)"></i>
</span>

copySystemInfo(val) {
	   const save = function (e) {
	       console.log(e)
	       e.clipboardData.setData('text/plain', val)
	       e.preventDefault()
	   }
	   document.addEventListener('copy', save);
	   document.execCommand('copy');
	   this.$message.success('复制成功')
},

到此复制功能已实现，后续发现使用该方法复制完成后，再使用浏览器自带的复制功能没有生效，剪贴板一直都是使用该方法复制的内容。

解决使用复制方法复制后，浏览器自带的复制功能不生效

原因： 复制方法中的参数为完整数据，只在特定的地方进行了方法（copySystemInfo）调用及传参。但只要鼠标右击复制或使用快捷键进行复制，都会触发监听的‘copy’事（addEventListener('copy'），此时并没有进行传值，所以剪贴板一直都是上一次复制的内容。

解决思路： 区分复制是点击icon图触发还是快捷键触发的

打印e.target可发现里面有当前元素的类名，所以可根据类名进行判断，可自定义类名，避免类名重复无法达到区分的目的

f(e.target.className == "el-icon-document-copy") {
	  e.clipboardData.setData('text/plain', val)
	  e.preventDefault()
}

copySystemInfo(val) {
      const save = function (e) {
        console.log(e)
        if(e.target.className == "el-icon-document-copy") {
          e.clipboardData.setData('text/plain', val)
          e.preventDefault()
        }
      }
      document.addEventListener('copy', save);
      document.execCommand('copy');
      this.$message.success('复制成功')
},