一、引入clipboard.js
方法1:npm install clipboard --save
在main.js中:
import clipboard from 'clipboard'
Vue.prototype.clipboard = clipboard
方法2:直接把clipboard.js下载下来
注释:可以在使用webpack打包时候,把clipboard.js和其他文件一起打包编译为一个JS文件,然后压缩
在utils.js中:
import ClipboardJS from './clipboard.js' // 下来下来的clipboard
function Clipboard (clickDomId,textDomId) {
// 这里一定需要先new,不然会导致点击两次,才会
let clipboard = new Clipboard(clickDomId, {
text: () => {
return document.getElementById(textDomId).innerText || ''
}
})
clipboard.on('success', (e) => {
console.log('Text:', e.text)
e.clearSelection()
})
clipboard.on('error', (e) => {
console.log(e)
})
}
在copy.vue中:
<!-- 提示:点击事件,不能用@click.stop,不然会复制不了 -->
<div v-for="(item, index) in copyList">
<div :id="'btn' + item.id" @click="clickBtn('#btn' + item.id, 'text' + item.id)></div>
<p :id="'text' + item.id">要复制的内容</p>
</div>
<script>
import { Clipboard } from './utils.js'
export default {
methods: {
clickBtn (clickId, textId) {
Clipboard(clickId, textId)
}
}
</script>