Vue使用vue-clipboard2复制内容到剪贴板
在项目中，经常使用的把文字内容复制到剪贴板的功能。
uni-app的复制到剪贴板的功能不支持H5。网上有npm加载vue-clipboard2的教程，但是我们用传统的cdn加载js的方式网上很少有这方面的教程。
今天我们就从两个角度来使用一下复制内容到剪贴板。
第一种，npm加载的方式，适合于类似uniapp vue-cli这类的项目
首先安装插件
npm install --save vue-clipboard2
然后再main.js中注册该插件
import Vue from 'vue'import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)
然后两个使用方法
template>
<div>
<button class="btn"
v-clipboard:copy="'复制的内容'"
v-clipboard:success="onSuccess"
v-clipboard:error="onError">复制内容</button>
</div></template><script>
export default {
...
methods: {
onSuccess: function (res) {
console.log('复制成功')
},
onError: function (err) {
console.log('复制失败')
}
}
}</script>方法2
template>
<div>
<button class="btn"
@click="onClick">复制内容</button>
</div></template><script>
export default {
...
methods: {
onClick(){
this.$copyText('复制的文本').then(
res => {
console.log('复制成功')
},
err => {
console.log('复制失败')
}
);
}
}
}</script>第二种方式是使用CDN传统加载的方式
首先引入cdn
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
然后再created中添加一个监听事件
created() {
let clipboard = new ClipboardJS(".copy");
clipboard.on("success", function (e) {
// alert("复制成功");
vant.Toast.success('复制成功')
e.clearSelection();
})
},然后使用
<button style="margin: 10px" class="copy" id="copy" data-clipboard-text="复制的内容"> 复制到剪贴板 </button>
