标签：vue 剪切板 IOS window 复制 clipboard2 clipboardData

vue项目实现复制内容到剪切板

介绍vue项目中实现复制内容到剪切板的两种实现方式：
1、execCommand(‘Copy’)方法：

(function () {
      document.oncopy = function (e) {
            e.clipboardData.setData('text', '要复制的内容');
            e.preventDefault();
            document.oncopy = null;
      }
})('要复制的内容');
document.execCommand('Copy');

2、clipboardData.setData()方法：
先判断是否支持clipboardData，再通过clipboardData的setData方法执行复制操作。

if (window.clipboardData) {
      window.clipboardData.setData('text', '要复制的内容');
}

两种方式结合使用可以增加各浏览器的兼容性：

（**备注：**这两种方式在window系统的PC端浏览器中可以实现，在安卓手机中测试也可行，在IOS手机无效，IOS系统电脑未测，估计也不行。）

3、第三方插件vue-clipboard2实现：
安装vue-clipboard2：

npm install vue-clipboard2

main.js文件中引入：
vue2引入：

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard )

vue3引入：

import { createApp } from 'vue'
import VueClipboard from 'vue-clipboard2'

const app = createApp(App)
app.use(VueClipboard)

使用：

this.$copyText('要复制的内容').then(function (e) {
     console.log('【复制成功】', e)
  }, function (e) {
     console.log('【复制失败】', e)
})

**（**备注：vue-clipboard2方式在安卓手机、window系统PC端浏览器、IOS手机浏览器中使用都有效，IOS电脑及平板未测）

有个小问题：this.$copyText()方法触发时，如果是点击事件触发都是复制成功，如果是setTimeout延时自动触发的方式，设置延时时间超过4秒时会复制失败。不知道是啥原因，有兴趣的工友可以研究下源码，欢迎留言解惑！！！！！！！

如果对你有帮助，记得点个赞噢（~~）

标签：vue,剪切板,IOS,window,复制,clipboard2,clipboardData
来源： https://blog.csdn.net/start_sea/article/details/121143340

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。