vue3使用clipboard进行复制
vue3使用clipboard进行复制
·
- 之前搜索很多关于button复制input框内容的方法,首次使用document.execCommand('Copy') // 执行浏览器复制命令并不成功,后来发现,官网将这个方法已经废弃,改用clipboard方法。
1.安装依赖
npm install clipboard --save
2.使用
<el-input id='copyTarget' v-model="currURL" placeholder="生成URL" style="width: 350px"></el-input>
<el-button class="copy" id="copyBtn" :data-clipboard-text="currURL" data-clipboard-action="copy" data-clipboard-target="#copyTarget" type="primary" plain @click="copy">复制URL</el-button>
import Clipboard from 'clipboard'
copy (){
let clipboard = new Clipboard('.copy')
clipboard.on('success', (e) => {
console.log('复制成功', e)
// 释放内存
clipboard.destroy()
alert("复制成功!");
})
clipboard.on('error', (e) => {
// 不支持复制
console.log('该浏览器不支持自动复制', e)
// 释放内存
clipboard.destroy()
alert("该浏览器不支持自动复制,请手动复制!");
})
},
3.注意:
1、data-clipboard-text中的currURL为复制内容,data-clipboard-action="copy"为copy动作也可为剪切cut,class名必须与new Clipboard()中的class名相同。
2、亲测 input中不能使用disabled,否则clipboard使用不了,
3、安装依赖时,我安装了两种
npm install clipboard --save
npm install --save vue-clipboard3
4、copy()方法写在methods: {}中,
4.附上参考链接:vue3使用clipboard进行复制_weixin_44440116的博客-CSDN博客
本次文章只是为了记录使用clipboard方法过程,避免踩更多坑,希望对大家有用,也欢迎指出错误!
更多推荐
已为社区贡献1条内容
所有评论(0)