vue 使用clipboard复制功能 复制到剪切板

在vue中使用clipboard.js 时候发现一个问题，如果移动端不是input或者button，则复制不成功，使用步骤如下

引入clipboard.js

npm install clipboard --save

在需要使用的组件中import

import Clipboard from 'clipboard';

添加需要复制的内容

<button class="tag-read" data-clipboard-text="我是可以复制的内容，啦啦啦啦" @click="copy">立即阅读</button>

copy() {var clipboard = new Clipboard('.tag-read')clipboard.on('success', e => {console.log('复制成功')// 释放内存clipboard.destroy()})clipboard.on('error', e => {// 不支持复制console.log('该浏览器不支持自动复制')// 释放内存clipboard.destroy()})}

或者

动态获取需要复制的内容

<input type="text" v-model="copyContent" id="copy_text" style="opacity: 0"><button ref="copy" data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy">复制</button>

复制

this.copyBtn = new this.$clipboard(this.$refs.copy)copy () {let _this = thislet clipboard = _this.copyBtnclipboard.on('success', function () {Toast('复制成功')})clipboard.on('error', function () {Toast('复制失败，请手动复制')})}

作者：guxuehua

来源：CSDN

原文：/guxuehua/article/details/79169190

版权声明：本文为博主原创文章，转载请附上博文链接！