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>
