在vue上使用clipboard.js拷贝内容

一、引入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>