您的位置:首页 > 产品设计 > UI/UE

vue 使用clipboard实现复制功能

2018-01-26 10:26 756 查看


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

1. 引入clipboard.js

npm install clipboard --save
2. 在需要使用的组件中import
import Clipboard from 'clipboard';
3. 添加需要复制的内容
<button class="tag-read" data-clipboard-text="我是可以复制的内容,啦啦啦啦" @click="copy">立即阅读</button>
4. 
copy() {
var clipboard = new Clipboard('.tag-read')
clipboard.on('success', e => {
console.log('复制成功')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
console.log('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  vue clipboard 复制