vue h5 复制文本_vue点击按钮复制文本粘贴
时间: 2023-07-07 21:35:03 浏览: 52
你可以使用 Clipboard API 来实现 Vue H5 中的复制文本功能。以下是一个示例:
首先,在你的 Vue 组件中,你需要引入 Clipboard API:
```javascript
import ClipboardJS from 'clipboard';
```
然后,在你的组件内,你可以使用以下代码来实现复制文本的功能:
```vue
<template>
<div>
<button ref="copyBtn" @click="copyText">复制文本</button>
</div>
</template>
<script>
export default {
mounted() {
// 初始化 ClipboardJS
this.clipboard = new ClipboardJS(this.$refs.copyBtn);
this.clipboard.on('success', () => {
// 复制成功时的提示
alert('复制成功!');
});
},
methods: {
copyText() {
// 需要复制的文本
const text = '这是需要复制的文本';
// 复制到粘贴板
this.clipboard.writeText(text);
},
},
beforeUnmount() {
// 销毁 ClipboardJS
this.clipboard.destroy();
},
};
</script>
```
在上面的代码中,我们通过在按钮上引用 `ref` 来获取按钮元素,然后使用 `ClipboardJS` 来初始化复制功能,并在成功复制时显示提示。`writeText` 方法用于将文本复制到粘贴板中。
需要注意的是,为了避免内存泄漏,我们需要在组件销毁前销毁 `ClipboardJS`。