vue实现复制粘贴，兼容IOS

原创已于 2022-11-15 11:05:52 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-05-26 11:57:54 首次发布

本文介绍两种实现网页内容复制的方法：一种是通过JavaScript操作DOM元素完成复制，特别针对iOS设备进行了兼容性处理；另一种是利用vue-clipboard2插件简化复制逻辑，并提供了成功和失败的回调函数。

实现复制粘贴（兼容ios）

方式一

	let value = "我是被copy的内容"
    let oInput = document.createElement("input");
    oInput.value = value;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//兼容ios
      if (!document.execCommand("Copy")) {
        oInput.setSelectionRange(0, oInput.value.length);
      }
    }
    document.execCommand("Copy"); // 执行浏览器复制命令
    document.body.removeChild(oInput);
    return new Promise((resolve,reject)=>{
        if (document.execCommand("Copy")) {
            resolve(value);
        }else{
            reject(value);
        }
    })

方式二

1、引入插件

npm install --save vue-clipboard2

2、在mian.js中引入

import VueClipboard from 'vue-clipboard2' //引入插件
Vue.use(VueClipboard) //安装插件

3、在组件间中使用

  <div>
    <span
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
    >
      复制
    </span>
  </div>
  
  methods: {
    onCopy: function (e) {
      console.log("复制成功！");
    },
    onError: function (e) {
      console.log("复制失败！");
    },
  },