vue实现双击复制
实现双击复制功能的步骤
在Vue中实现双击复制功能，可以通过以下方法完成：
方法一：使用document.execCommand（兼容旧浏览器）
<template>
<div @dblclick="handleDoubleClick">双击复制这段文字</div>
</template>
<script>
export default {
methods: {
handleDoubleClick() {
const range = document.createRange();
range.selectNode(document.querySelector('div'));
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() {
try {
await navigator.clipboard.writeText(this.$el.textContent);
alert('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
}
}
}
</script>方法三：使用第三方库vue-clipboard2
安装库：
npm install vue-clipboard2使用示例：
<template>
<div @dblclick="copy">双击复制这段文字</div>
</template>
<script>
import VueClipboard from 'vue-clipboard2'
export default {
methods: {
copy() {
this.$copyText(this.$el.textContent).then(
() => alert('复制成功'),
() => alert('复制失败')
)
}
}
}
</script>注意事项
- Clipboard API需要HTTPS环境或在localhost下工作
- 某些浏览器可能需要用户首次交互后才允许访问剪贴板
- 考虑添加视觉反馈（如Toast提示）代替alert
- 移动端可能需要调整触摸事件
