vue2中实现文本复制、二维码复制

最新推荐文章于 2024-04-29 10:52:50 发布

琴～～

最新推荐文章于 2024-04-29 10:52:50 发布

阅读量292

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/132741450

版权

vue2中实现文本复制、二维码复制

1、文本复制

copyLinkText() {
    const input = document.createElement('input');
    document.body.appendChild(input);
    input.setAttribute('value', this.inputLinkValue);
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        this.$message.success('已复制');
    }
    document.body.removeChild(input);
},

2、二维码复制

// 数字类型转化
base64ToBlob(dataurl) {
    let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
},
// 点击复制二维码
copyQrCode() {
    let container = document.getElementById('qrCode').childNodes[1];
    let myBlob = this.base64ToBlob(container.getAttribute('src'));
    navigator.clipboard.write([new window.ClipboardItem({ [myBlob.type]: myBlob })]);
},