vue按钮实现复制

Vue 按钮实现复制功能

在 Vue 中实现按钮复制功能，可以通过 document.execCommand 或现代浏览器支持的 Clipboard API 完成。以下是两种方法的实现示例：

方法一：使用 document.execCommand（兼容旧浏览器）

<template>
  <button @click="copyText">复制文本</button>
</template>

<script>
export default {
  methods: {
    copyText() {
      const textToCopy = '需要复制的文本';
      const textarea = document.createElement('textarea');
      textarea.value = textToCopy;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      alert('已复制到剪贴板');
    }
  }
};
</script>

方法二：使用 Clipboard API（现代浏览器推荐）

<template>
  <button @click="copyText">复制文本</button>
</template>

<script>
export default {
  methods: {
    async copyText() {
      const textToCopy = '需要复制的文本';
      try {
        await navigator.clipboard.writeText(textToCopy);
        alert('已复制到剪贴板');
      } catch (err) {
        console.error('复制失败:', err);
      }
    }
  }
};
</script>

方法三：封装为可复用的指令

若需多处复用，可封装为 Vue 指令：

// main.js 或单独文件
Vue.directive('copy', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const text = binding.value;
      navigator.clipboard.writeText(text)
        .then(() => alert('复制成功'))
        .catch(err => console.error(err));
    });
  }
});

使用指令：

<button v-copy="'需要复制的文本'">点击复制</button>

注意事项

• Clipboard API 要求 HTTPS 环境或本地开发环境（localhost）。
• 可结合 ElementUI 或 Ant Design Vue 的提示组件替换原生 alert。
• 兼容性处理：优先检测 navigator.clipboard，不存在时降级到 execCommand。