vue实现文本复制
Vue 实现文本复制的方法
在 Vue 项目中实现文本复制功能，可以通过以下几种方式实现：
使用 document.execCommand
这种方法兼容性较好，但已逐渐被现代 API 取代。
methods: {
copyText(text) {
const textarea = document.createElement('textarea')
textarea.value = text
document.body.appendChild(textarea)
textarea.select()
document.execCommand('copy')
document.body.removeChild(textarea)
alert('复制成功')
}
}使用 Clipboard API
现代浏览器推荐使用 Clipboard API，更安全且支持 Promise。
methods: {
async copyText(text) {
try {
await navigator.clipboard.writeText(text)
alert('复制成功')
} catch (err) {
console.error('复制失败:', err)
}
}
}使用第三方库
可以使用 clipboard 等第三方库简化操作。
安装：
npm install clipboard --save使用：
import Clipboard from 'clipboard'
methods: {
initCopy() {
const clipboard = new Clipboard('.copy-btn', {
text: () => '要复制的文本'
})
clipboard.on('success', () => {
alert('复制成功')
clipboard.destroy()
})
clipboard.on('error', () => {
alert('复制失败')
clipboard.destroy()
})
}
},
mounted() {
this.initCopy()
}注意事项
- 使用 Clipboard API 时需要注意 HTTPS 环境限制
- 移动端可能需要用户手势触发
- 提供适当的反馈提示提升用户体验
