如何實現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