解决VUE+Clipboard单击/首次点击无效的问题

先说结论

选择器用父元素，通过option指定container为子元素对象

现象

使用Clipboard去实现复制功能，单击无效，得点两下才能复制

具体实现

这是我的元素代码，我是在列表的操作列加复制，所以我给按钮的父级元素定了个id

<el-tooltip class="item" :id="'copy-'+scope.row.id" effect="dark" content="复制分享" placement="top">
  <i class="el-icon-share icon-operation" :data-clipboard-text="scope.row.text" @click="handleCopy(scope.row,$event)"></i>
</el-tooltip>

下面是处理事件

handleCopy(row,e) {
  let _this = this
  
  let clipboard = new Clipboard("#copy-"+row.id,{
    container: e.target
  })
  
  //复制成功
  clipboard.on('success', function() {
    _this.$message.success('复制成功！')
    clipboard.destroy()
  })
  //复制失败
  clipboard.on('error', function() {
    _this.$message.error('复制失败！')
    clipboard.destroy()
  })
  
},

官方解释如下：

转载至：www.liuqi.dev/blog/vue_cl…