vue复制功能

在Vue中实现复制功能，可以使用Clipboard.js库。Clipboard.js是一个轻量级的JavaScript库，它提供了一种方便的方式来复制文本到剪贴板中。

步骤如下：

安装Clipboard.js库

npm install clipboard --save

在Vue组件中引入Clipboard.js

import Clipboard from 'clipboard'

在Vue组件的mounted生命周期钩子中初始化Clipboard对象

mounted() {
  this.clipboard = new Clipboard('.copy-btn')
},

这里的.copy-btn是一个class，我们需要在模板中为复制按钮添加这个class。

在Vue组件的methods中编写复制函数

copyText() {
  const input = document.getElementById('copy-input')
  input.select()
  this.clipboard.copyText(input.value)
  this.$message.success('复制成功！')
}

这个函数中，我们首先获取输入框的DOM元素，然后将输入框的值复制到剪贴板中，并提示用户复制成功。

在模板中添加复制按钮和输入框

<template>
  <div>
    <input type="text" id="copy-input" value="需要复制的文本">
    <button class="copy-btn" @click="copyText">复制</button>
  </div>
</template>

在模板中，我们添加了一个输入框和一个复制按钮。复制按钮的点击事件绑定了copyText函数。

完整的示例代码如下：

<template>
  <div>
    <input type="text" id="copy-input" value="需要复制的文本">
    <button class="copy-btn" @click="copyText">复制</button>
  </div>
</template>

<script>
import Clipboard from 'clipboard'

export default {
  data() {
    return {
      clipboard: null
    }
  },
  mounted() {
    this.clipboard = new Clipboard('.copy-btn')
  },
  methods: {
    copyText() {
      const input = document.getElementById('copy-input')
      input.select()
      this.clipboard.copyText(input.value)
      this.$message.success('复制成功！')
    }
  }
}
</script>
``