vue点击按钮实现复制
实现点击按钮复制文本的方法
方法一：使用 document.execCommand（兼容旧浏览器）
创建一个隐藏的 textarea，将需要复制的文本赋值给它，选中内容后执行复制命令。
copyText(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}方法二：使用 Clipboard API（现代浏览器推荐）
通过 navigator.clipboard.writeText 实现异步复制，需注意 HTTPS 环境或本地开发环境支持。
async copyText(text) {
try {
await navigator.clipboard.writeText(text);
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
}方法三：封装为 Vue 指令
全局注册指令，通过 v-copy 绑定按钮和待复制的文本。
Vue.directive('copy', {
bind(el, { value }) {
el.addEventListener('click', () => {
navigator.clipboard.writeText(value)
.then(() => alert('复制成功'))
.catch(() => alert('复制失败'));
});
}
});模板中使用方式：
<button v-copy="'要复制的文本'">点击复制</button>注意事项
- 方法二需用户授权，部分浏览器可能限制非安全上下文（如非 HTTPS）。
- 方法一已逐渐被废弃，但在旧浏览器中仍可使用。
- 可结合
ElementUI或Ant Design Vue的message组件提示复制结果。
