vue如何实现点击复制按钮，复制输入框中的内容至剪贴板

在Vue.js中，你可以通过使用`@click`事件和一些JavaScript库，如`clipboard.js`来实现点击复制按钮复制输入框内容的功能。首先，你需要安装`clipboard.js`，可以使用npm或yarn：

npm install clipboardjs
# 或者
yarn add clipboardjs

然后，在你的组件模板里添加复制按钮并绑定`@click`事件：

<template>
  <div>
    <input v-model="inputValue" @input="updateClipboard" />
    <button @click="copyToClipboard">复制</button>
  </div>
</template>

<script>
import ClipboardJS from 'clipboard';

export default {
  data() {
    return {
      inputValue: '',
      clipboardInstance: null,
    };
  },
  mounted() {
    this.clipboardInstance = new ClipboardJS('.copy-button');
  },
  methods: {
    copyToClipboard() {
      if (this.inputValue) {
        this.clipboardInstance.copy(this.inputValue);
      }
    },
    updateClipboard(e) {
      // 更新输入值，当用户在输入框内修改内容时
      this.inputValue = e.target.value;
    },
  },
  beforeDestroy() {
    this.clipboardInstance.destroy();
  },
};
</script>

<style scoped>
.copy-button {
  /* 样式设置，例如：padding、background-color等 */
}
</style>

在这个例子中，我们创建了一个`clipboardInstance`并在`mounted()`生命周期钩子中初始化。点击“复制”按钮时，会调用`copyToClipboard`方法，尝试将当前输入框的内容复制到剪贴板。每次输入框内容改变时，`updateClipboard`方法会被触发，并更新剪贴板的内容。