vue实现双击复制
Vue 实现双击复制功能
在 Vue 中实现双击复制功能可以通过以下方法完成：
方法一：使用 document.execCommand
<template>
<div @dblclick="copyText">双击复制这段文字</div>
</template>
<script>
export default {
methods: {
copyText(event) {
const range = document.createRange();
range.selectNode(event.target);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
alert('已复制到剪贴板');
}
}
}
</script>方法二：使用 Clipboard API
<template>
<div @dblclick="copyText">双击复制这段文字</div>
</template>
<script>
export default {
methods: {
async copyText(event) {
try {
await navigator.clipboard.writeText(event.target.textContent);
alert('已复制到剪贴板');
} catch (err) {
console.error('复制失败:', err);
}
}
}
}
</script>方法三：使用第三方库 vue-clipboard2
安装依赖：
npm install vue-clipboard2使用示例：
<template>
<div @dblclick="copyText">双击复制这段文字</div>
</template>
<script>
import VueClipboard from 'vue-clipboard2'
export default {
methods: {
copyText(event) {
this.$copyText(event.target.textContent).then(() => {
alert('已复制到剪贴板');
}, () => {
console.error('复制失败');
})
}
}
}
</script>注意事项
- Clipboard API 需要 HTTPS 环境或在 localhost 下工作
- 某些浏览器可能需要用户先与页面交互才能访问剪贴板
- 考虑添加视觉反馈（如 Toast）替代
alert - 移动端可能需要调整触摸事件处理
以上方法可根据项目需求和技术栈选择最适合的实现方式。
