在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()
})
或者 3.动态获取需要复制的内容
<input type="text" v-model="copyContent" id="copy_text" style="opacity: 0">
<button ref="copy" data-clipboard-action="copy" class="tag-read" data-clipboard-target="#copy_text" @click="copy">复制</button>
- 复制
this.copyBtn = new this.$clipboard(this.$refs.copy)
copy () {
let _this = this
let clipboard = _this.copyBtn
// clipboard = new Clipboard('.tag-read');
clipboard.on('success', function () {
Toast('复制成功')
})
clipboard.on('error', function () {
Toast('复制失败,请手动复制')
})
}