vue2实现点击复制按钮,复制这行的pageId
时间: 2023-07-18 16:47:01 浏览: 51
可以使用Vue.js中的Clipboard.js插件来实现点击复制按钮复制pageId的功能。首先,在vue组件中引入Clipboard.js插件,然后在需要复制的元素上添加一个唯一的id,例如:
```
<template>
<div>
<p>pageId: {{ pageId }}</p>
<button @click="copyPageId">复制pageId</button>
</div>
</template>
<script>
import ClipboardJS from 'clipboard'
export default {
data() {
return {
pageId: '123456'
}
},
methods: {
copyPageId() {
const clipboard = new ClipboardJS('#copyBtn')
clipboard.on('success', (e) => {
console.log('复制成功')
clipboard.destroy()
})
clipboard.on('error', (e) => {
console.log('复制失败')
clipboard.destroy()
})
}
}
}
</script>
```
在按钮上添加一个点击事件,调用copyPageId方法。在copyPageId方法中,创建一个ClipboardJS实例,将需要复制的元素的id传入即可。当复制成功或失败时,会触发success或error事件,可以在事件中进行相应的处理。最后需要在组件销毁时调用clipboard.destroy()方法销毁ClipboardJS实例。