Js Vue 一键复制文本内容 - clipboard.js（兼容谷歌等主流浏览器）- 附完整示例

// 引入clipboard库
import Clipboard from 'clipboard';
 
// 在Vue组件中使用
export default {
  data() {
    return {
      copyText: '要复制的文本内容',
    };
  },
  mounted() {
    // 初始化clipboard实例
    const clipboard = new Clipboard('.copy-btn', {
      text: () => this.copyText,
    });
 
    clipboard.on('success', (e) => {
      console.log('复制成功！');
      // 可以添加用户反馈，如弹窗提示复制成功
      // 清理操作，如移除复制按钮的可见选中状态等
    });
 
    clipboard.on('error', (e) => {
      console.log('复制失败！');
      // 可以添加用户反馈，如弹窗提示复制失败
    });
  },
  methods: {
    // 更新要复制的文本内容
    updateCopyText(newText) {
      this.copyText = newText;
    }
  }
};

在这个示例中，我们首先导入了clipboard库，然后在Vue组件的mounted钩子中初始化了clipboard实例。我们监听了复制成功和失败的事件，并在成功时通知用户。我们还提供了一个方法来更新要复制的文本内容，这样用户可以在需要的时候复制不同的文本内容。