vue 点击复制div里的内容

在Vue中，可以使用Clipboard API和事件绑定来实现点击复制div里的内容。以下是一个简单的示例：

首先，安装clipboard库：

npm install clipboard --save

然后，在Vue组件中引入clipboard库：

import Clipboard from 'clipboard';

export default {
  mounted() {
    // 创建一个新的Clipboard实例
    this.clipboard = new Clipboard('.btn-copy');

    // 监听复制成功事件
    this.clipboard.on('success', (e) => {
      console.log('复制成功');
    });

    // 监听复制失败事件
    this.clipboard.on('error', (e) => {
      console.log('复制失败');
    });
  },
  beforeDestroy() {
    // 销毁Clipboard实例
    this.clipboard.destroy();
  },
  methods: {
    copyText() {
      // 复制div里的内容
      this.clipboard.text = this.$refs.content.innerText;
    }
  }
}

然后，在模板中添加一个点击事件来调用copyText方法：

<template>
  <div>
    <div ref="content">要复制的内容</div>
    <button class="btn-copy" @click="copyText">复制</button>
  </div>
</template>

这样，当点击复制按钮时，会将div里的内容复制到剪贴板中