vue 获取剪切板并复制到textarea中

在Vue.js中，你可以使用`clipboard`库来获取剪贴板的内容，并通过`v-model`指令将数据绑定到textarea元素上，以便于复制粘贴。首先，你需要安装`clipboardjs`库，可以使用npm或yarn：

# npm
npm install clipboardjs

# yarn
yarn add clipboardjs

然后，在你的Vue组件中引入并配置它：

import ClipboardJS from 'clipboardjs';

export default {
  data() {
    return {
      clipBoardContent: '',
    };
  },
  mounted() {
    this.clipboard = new ClipboardJS('.copy-btn'); // 假设你有一个<button class="copy-btn">复制</button>
    this.clipboard.on('success', async event => {
      await this.copyClipboardToTextarea(); // 当内容复制成功后，立即尝试复制到textarea
    });
  },
  methods: {
    async copyClipboardToTextarea() {
      try {
        const content = await this.clipboard.text(); // 获取剪贴板内容
        this.$refs.myTextarea.value = content; // 将内容设置给textarea
      } catch (error) {
        console.error('Failed to copy to textarea:', error);
      }
    },
  },
};

在这个例子中，假设你在模板里有一个`<textarea ref="myTextarea"></textarea>`，当用户点击“复制”按钮时，会尝试从剪贴板获取内容并填充到textarea。