Vue + vue-clipboard3 实现点击复制内容到剪切板

Vue3 + vue-clipboard3 实现点击复制功能

<van-button type="success" block @click="copyUrl">复制链接</van-button>

<script setup>
import { Toast } from 'vant';
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard()
const url = 'https://www.npmjs.com/package/vue-clipboard3'
const copyUrl = () => {
  try {
    await toClipboard(url)
    Toast({
      message: '复制成功',
      position:'top'
    })
  } catch (err) {
    Toast({
      message: '复制失败',
      position:'top'
    })
  }
};
</script>

实现原理

function copyToClipboard(text) {
  // 方法1：现代浏览器推荐方式（需要HTTPS环境）
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text)
      .then(() => showToast())
      .catch(err => console.error('复制失败:', err));
    return;
  }

  // 方法2：兼容旧浏览器的备用方案
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';  // 防止滚动跳转
  document.body.appendChild(textarea);
  textarea.select();
  
  try {
    document.execCommand('copy');
    showToast();
  } catch (err) {
    console.error('复制失败:', err);
  } finally {
    document.body.removeChild(textarea);
  }
}

官方文档

www.npmjs.com/package/vue…