js原生点击按钮复制内容到粘贴板/修复(事件监听之后,原页面上组合键/右键不能复制到粘贴板)

前言: 有个小需求,需要写成组件,在当前页面多次重复写的一个icon,点击复制当前内容到粘贴板,为了方便封装成组件了,具体就不在这赘述了
注意: 原生的粘贴方法里面不能去放异步操作,会失效= =最好在父组件确定字段,直接一次性拿到所有内容
啰啰嗦嗦的独白: 可看可不看(因为我是详情页有默认反显值,默认值有外网有需要脱敏值,还好跟后端商量了下,一次性接口返回给我就行了,我再塞给子组件里面的变量,点击的时候根据点击按钮的不同去获取接口返回的不同的脱敏值)

// HTML
<template>
  <div>
    <Icon type='ios-copy' size='23' @click='copyTheClipboard' class='ios_copy'/>
  </div>
</template>
<script>
   export default ({
       name:'',
       prop: {
          pasteBoard: Object
       }
       data () {
          return {}
        },
      },
      created () {},
      methods: {
         copyTheClipboard () {
           let val = ''
           let that = this
           // 不同的位置点击传不同的值区分
           if (this.differentiate == 'name' ) {
              // 父组件传过来的默认脱敏值
              val = that.pasteBoard.customName
           }
           const save = function (e) {
              e.clipboardData.setData('text/plain', val) // 塞数据到剪贴板
              e.preventDefault();  // 阻止默认事件
           }
           document.addEventListener('copy', save);
           document.execCommand('copy'); // 复制
           that.$Message.success('复制成功')
           document.removeEventListener('copy', save); // **复制ok之后记得要移除绑定事件
         }
      }
   })
</script>
<style lang='less' scoped>
</style>