vue3 复制粘贴文本

前言

需求中有一键复制，一键粘贴的功能，尝试了三种使用方法

navigator

const text = ref('要复制的内容');
navigator.clipboard.writeText(text.value);

但是这种方法只能本地运行时使用，测试环境时会报错，因为浏览器禁用了非安全域的 navigator.clipboard 对象

document.execCommand(‘copy’)

const text = ref('要复制的内容');
const copyText = (text) => {
	const textarea = document.createElement('textarea');
	textarea.value = text;
    document.body.appendChild(textarea);
    textarea.focus();
    textarea.select();
    message.success('复制成功');
    return new Promise((resolve, reject) => {
	   document.execCommand('copy') ? resolve() : reject();
	   textarea.remove();
 })
};
copyText(text.value)

document.execCommand可以使用，但自身处于弃用状态

vue-clipboard3

下载

npm i vue-clipboard3

引用和使用

import useClipboard from 'vue-clipboard3';
const { toClipboard } = useClipboard();

const text = ref('要复制的内容');
const copyText = async (text) => {
	try {
	    await toClipboard(text);
	    message.success('复制成功');
	} catch (e) {
	    console.error(e);
	}
}
copyText(text.value)

总结

复制推荐使用vue-clipboard3
粘贴在项目中直接赋值了