vue3使用clipboard进行复制

2023-09-16 04:18| 来源: 网络整理| 查看: 265

1.安装依赖

npm install clipboard --save

2.使用示例1

复制 import Clipboard from 'clipboard' const copy = () => { let clipboard = new Clipboard('.copy') clipboard.on('success', (e) => { console.log('复制成功', e) // 释放内存 clipboard.destroy() }) clipboard.on('error', (e) => { // 不支持复制 console.log('该浏览器不支持自动复制', e) // 释放内存 clipboard.destroy() }) }

3.使用示例2

复制 import { reactive } from 'vue' const state = reactive( { code : '\n' + ' \n' + ' \n' + ' \n' + ' \n' + ' 卡片名称\n' + ' 更多\n' + ' \n' + ' \n' + ' 卡片内容\n' + ' \n' + ' \n' + '' }) const handleCopy = async (code) => { let clipboard = new Clipboard('.copy', { text: function () { return code } }) await clipboard.on('success', (e) => { console.log('复制成功', e) // 释放内存 clipboard.destroy() }) await clipboard.on('error', (e) => { // 不支持复制 console.log('该浏览器不支持自动复制', e) // 释放内存 clipboard.destroy() }) }

3.注意： data-clipboard-text中为复制内容，class名必须与new Clipboard()中的class名相同。阻止冒泡@click.stop无法使用clipboard进行复制，改为使用其他方法实现。

const copy = (data: string) => { let url = data let oInput = document.createElement('textarea') oInput.value = url document.body.appendChild(oInput) oInput.select() // 选择对象; document.execCommand('Copy') // 执行浏览器复制命令 console.log('复制成功') oInput.remove() }

【本文地址】

公司简介

联系我们