1、首先需要npm该插件
npm install clipboard --save
2、在组件内引入该插件
import Clipboard from "clipboard"
3.version1、在页面上添加一个id为ewm-copy-content可以点击的div和一个id为ewm-copy-target的隐藏div,:data-clipboard-text是要复制的内容,需要在data中定义currentPageUrl的内容,data-clipboard-action是操作方式,这里是要复制所以是copy,data-clipboard-target是复制的目标,指向的ewm-copy-target
<input id="ewm-copy-target" v-show="false" v-model="currentPageUrl" />
<div id="ewm-copy-content" :data-clipboard-text="currentPageUrl" data-clipboard-action="copy" data-clipboard-target="#ewm-copy-target" title="复制链接" @click="coppUrl">
<img src="../../../../assets/icons/copy.png" />
</div>
3.version2、当然也可以不用上面那么麻烦,直接定义data-clipboard-text需要复制的内容即可
<div id="ewm-copy-content" :data-clipboard-text="currentPageUrl" title="复制链接" @click="coppUrl">
<img src="../../../../assets/icons/copy.png" />
</div>
4、methods中定义coppUrl函数
coppUrl() {
let that = this;
let clipboard = new Clipboard("#ewm-copy-content");
clipboard.on('success', e => {
that.$Message.success("已成功复制到您的剪切板!")
clipboard.destroy()
})
clipboard.on('error', e => {
that.$Message.error("该浏览器不支持自动复制")
clipboard.destroy()
})
},