2021-11-17 js 实现复制功能
2021-11-17
ie浏览器api:window.clipboardData,举例:
if (window.clipboardData.setData("text",'666')) {
console.log("复制成功");
} else {
console.log("复制失败");
}
注意:clipboardData只存在ie浏览器,谷歌火狐等浏览器没有此方法(网上说的,实测谷歌没有)
另一种方法:
安装一个插件【vue-clipboard】,用插件提供的api来复制:
cnpm i vue-clipboard2 -S 安装插件;
在main.js 中引入;
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);
使用案例:
插件官网:https://github.com/Inndy/vue-clipboard2
注意:这是vue方法,success是调用成功的回调,error和success则相反。
如果报错了建议先看官方文档,或者看一下别人提出的解决方案:
https://blog.csdn.net/u010328533/article/details/122069817
https://blog.csdn.net/AIB_Kasic/article/details/124587880
https://blog.csdn.net/weixin_38384296/article/details/84105115
2022-09-02 补充一个js原生方法:
function copyTwo(){ const range = document.createRange(); range.selectNode(document.getElementById('copyInner')); const selection = window.getSelection(); if (selection.rangeCount > 0) selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); }
注:该方法来源至网络👉http://t.csdn.cn/o3o5E
2023-06-30 补充uniapp提供的一个复制api:
copy(e) { let that = this; uni.setClipboardData({ data: e, showToast: false, success() { that.$u.toast("复制成功"); }, fail() { that.$u.toast("复制失败"); }, }); }
这个方法适用于uniapp项目,相比于上面的vue-clipboard2,如果是uniapp项目,后者在android端显示报错:TypeError: Cannot read property 'createElement' of undefined。
该方法出处:https://uniapp.dcloud.net.cn/api/system/clipboard.html#setclipboarddata