clipboard冒泡 原生js复制

场景：在table行有一个按钮实现复制功能，但是和行点击事件冲突了，加个@click.stop？？

cliboard插件官方文档感觉介绍太少了，查了半天资料，我感觉这是挺常用的场景啊，网上也没啥解决方案，这插件不大行啊[doge]

因为每一行都有这个按钮，用了css选择器，这样娶不到event

copyListen() {
      this.clipboard = new ClipboardJS('.copy-json', {
        text: trigger => {
            return '我是复制内容'
        }
      })
      this.clipboard.on('error', e => {
        this.$message.error('代码复制失败')
      })
    },

这样可以，但是阻止不了冒泡

点击事件加了stop修饰这个插件就失效了，，，事件委托（cliboard插件机制）是基础基于事件冒泡的

 

 

只能用原生js，但是input框当用户看不见时是不能复制的（浏览器安全规范），v-show,display不行，position定位其实可以，但是占地方（也可以再把宽度调小）

然后就和无良广告商学了一套

toCopy(jsonContent) {
      if (jsonContent) {
        ......
        this.fakeElem = document.createElement('textarea')
        this.fakeElem.value = jsonContent
        document.body.appendChild(this.fakeElem)
        this.fakeElem.select()
        if (document.execCommand('Copy')) {
          this.$notify.success('复制成功')
        } else {
          this.$notify.error('复制失败')
        }
        if (this.fakeElem) {
          document.body.removeChild(this.fakeElem)
          this.fakeElem = null
        }
      }...
    },

参考：https://www.yuque.com/sanyuebuzhichun/xon2xr/ny150b