您现在的位置是：网站首页> 编程资料编程资料
在vue或H5中如何使用复制粘贴功能_vue.js_
2023-05-24
422人已围观
简介 在vue或H5中如何使用复制粘贴功能_vue.js_
vue或H5中使用复制粘贴
1.使用原生的方法,一般都是在浏览器上使用,所以兼容性不是很好
我是直接使用原生方法创建的input,你也可以直接在DOM上加input标签,然后去获取它的value值.
copyUrl(){ let url = 'https://blog.csdn.net/linfng023/article/details/101014133'; let domInput = document.createElement('input'); domInput.value = url; document.body.appendChild(domInput); // 添加input节点 domInput.select(); // 选择对象; document.execCommand("Copy"); // 执行浏览器复制命令 this.$toast({ message: `链接复制成功！`, duration: 2000 }); domInput.remove() },2.使用插件的方式clipboard.js,使用步骤：
安装clipboard.js,可以使用npm安装(也可以cnpm)
npm install clipboard --save
引入clipboard.js,可以mian.js上直接引用(全局使用),也可以在你需要复制粘贴的组件上引用(局部使用)
import clipboard from 'clipboard'; //注册到vue原型上 Vue.prototype.clipboard = clipboard;
然后复制粘贴
copyLink() { let clipboardUrl = new this.clipboard(".copyClassUrl"); clipboardUrl.on('success', function () { _this.$toast({ message: `链接复制成功！`, duration: 2000 }); }); clipboardUrl.on('error', function () { console.log(clipboardUrl) }); },复制粘贴功能 ：H5或vue或uniapp
1.原生的浏览器复制方式，一般都是在浏览器上使用
单独定义一个h5-copy.js文件。用于复用 复制粘贴功能
h5-copy.js
export default function h5Copy(content) { console.log(content); if (!document.queryCommandSupported('copy')) { // 不支持 uni.showToast({ title:'您当前的应用环境不支持自动复制内容......', icon:'none' }) return false } let textarea = document.createElement("textarea") textarea.value = content textarea.readOnly = "readOnly" document.body.appendChild(textarea) textarea.select() // 选择对象 textarea.setSelectionRange(0, content.length) //复制的内容的范围 let result = document.execCommand("copy") // 执行浏览器复制命令 textarea.remove() return result }然后在文件中使用
如果要是在uniapp中使用app与h5 同时都实现复制粘贴功能的话：
- H5可使用上述方式实现，
- app可以用uniapp官网的复制粘贴的api接口
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
