vue实现点击复制内容

使用 document.execCommand 方法

在 Vue 中创建一个方法，利用 document.execCommand('copy') 实现复制功能。需要创建一个临时的 textarea 或 input 元素来存放要复制的内容。

<template>
  <button @click="copyToClipboard">复制内容</button>
</template>

<script>
export default {
  methods: {
    copyToClipboard() {
      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

现代浏览器支持 navigator.clipboard.writeText 方法，更加简洁且无需操作 DOM。

<template>
  <button @click="copyToClipboard">复制内容</button>
</template>

<script>
export default {
  methods: {
    async copyToClipboard() {
      try {
        await navigator.clipboard.writeText('要复制的内容');
        alert('复制成功');
      } catch (err) {
        console.error('复制失败:', err);
      }
    }
  }
};
</script>

使用第三方库 vue-clipboard3

如果项目允许使用第三方库，vue-clipboard3 是一个简单易用的解决方案。

安装依赖：

npm install vue-clipboard3

在组件中使用：

<template>
  <button @click="copyToClipboard">复制内容</button>
</template>

<script>
import { useClipboard } from 'vue-clipboard3';

export default {
  setup() {
    const { clipboard } = useClipboard();

    const copyToClipboard = async () => {
      try {
        await clipboard.write('要复制的内容');
        alert('复制成功');
      } catch (err) {
        console.error('复制失败:', err);
      }
    };

    return { copyToClipboard };
  }
};
</script>

兼容性处理

对于不支持 Clipboard API 的旧浏览器，可以结合 document.execCommand 作为备选方案。

<template>
  <button @click="copyToClipboard">复制内容</button>
</template>

<script>
export default {
  methods: {
    async copyToClipboard() {
      const textToCopy = '要复制的内容';
      try {
        await navigator.clipboard.writeText(textToCopy);
        alert('复制成功');
      } catch (err) {
        const textarea = document.createElement('textarea');
        textarea.value = textToCopy;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        alert('复制成功');
      }
    }
  }
};
</script>

封装为指令

将复制功能封装为 Vue 指令，方便全局复用。

// main.js 或单独文件
import { createApp } from 'vue';

const app = createApp(App);

app.directive('copy', {
  mounted(el, binding) {
    el.addEventListener('click', async () => {
      try {
        await navigator.clipboard.writeText(binding.value);
        alert('复制成功');
      } catch (err) {
        const textarea = document.createElement('textarea');
        textarea.value = binding.value;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        alert('复制成功');
      }
    });
  }
});

app.mount('#app');

在组件中使用指令：

<template>
  <button v-copy="'要复制的内容'">复制内容</button>
</template>

以上方法根据项目需求和浏览器兼容性选择即可。