vue点击实现复制

首先先安装模块工具

cnpm install clipboard --save

在当前页面引入模块

import Clipboard from 'clipboard'; 

使用：
html代码

<div class="box">我的邀请码：<span class="inviteCode" >XF684V1G</span><span class="copy order-id" :data-clipboard-text="'XF684V1G'" @click="copy">复制</span></div>

页面样式

点击复制之后的js

copy () {
      var clipboard = new Clipboard('.order-id') //绑定数据标签的类名
      clipboard.on('success', e => {
        Toast('邀请码已复制');
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        console.log('该浏览器或手机权限不支持复制功能');
        // 释放内存
        clipboard.destroy()
      })
    },

注意：order-id类名 和 :data-clipboard-text 建议绑定在复制按钮上

 

如果以上方法复制无效，请看下面最后再提供一种

 

import i18n from 'i18next';
import { message } from 'antd';


export const Replicate = async (value) => {
    const target = document.createElement('input'); //创建input节点
    target.value = value; // 给input的value赋值
    target.style.position = 'absolute';
    target.style.top = '-99999px';
    document.body.appendChild(target); // 向页面插入input节点
    target.select(); // 选中input
    target.setSelectionRange(0, 99999); // 兼容移动设备
    try {
        await document.execCommand('Copy'); // 执行浏览器复制命令
        // 移除虚拟input元素
        document.body.removeChild(target);
        message.success(i18n.t('copySuccessfully'));
    } catch {
        message.error(i18n.t('Copying_is_not_supported'));
    }
};