vue copy text

A commonly used library is clipboard.js, which can help you implement cross-browser copy to clipboard functionality.

First, install clipboard.js:

cnpm install clipboard

Create a Vue component and use clipboard.js:

<template>
  <div>
    <input v-model="textToCopy" type="text" />
    <button @click="copyText">Copy</button>
  </div>
</template>
<script setup>
import Clipboard from 'clipboard';
import { ref } from 'vue';

const textToCopy = ref('');

const copyText = () => {
  const clipboard = new Clipboard('.copy-button', {
    text: () => textToCopy.value
  });
  clipboard.on('success', (e) => {
    console.log('Text copied:', e.text);
    clipboard.destroy(); // 清理 clipboard 实例
  });

  clipboard.on('error', (e) => {
    console.error('Copy failed:', e.action);
    clipboard.destroy();
  });
  clipboard.onClick(event); // 触发点击事件
};
</script>