如何实现js点击按钮复制url

针对el-table里面增加复制url的功能按钮

html:

 

<el-button @click="copyurl(scope.row.url)" type="text" size="small">复制url</el-button>

 

js:

copyurl(url) {
  console.log(url,89898989)
  var copyTest = url
  var inputTest = document.createElement('input')
  inputTest.value = copyTest
  document.body.appendChild(inputTest)
  inputTest.select()
  document.execCommand('Copy')
  inputTest.className = 'oInput'
  inputTest.style.display = 'none'
  this.$message.success('复制成功')
}

这是原声实现的一种方法，也可以依赖vue的插件vue-clipboard2

npm install vue-clipboard2 --save-dev

然后引入

import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true; // add this line
Vue.use(VueClipboard)

然后在button组件中使用

<el-button
  type="text"
  v-if="scope.row.op_status === 2"
  v-clipboard:copy="scope.row.copyMessage"
  v-clipboard:success="onCopy"
  v-clipboard:error="onError"
  >复制链接</el-button>

v-clipboard:copy = 要复制的内容
v-clipboard:success = 复制成功回调
v-clipboard:error = 复制失败回调

可以根据自己想要弹出的内容写在对应的回调里
插件方法来源https://www.jianshu.com/p/7834115dd028