vue3点击按钮实现复制

先看一下效果图

1.先安装依赖

1.npm i clipboard --save

2.组件内部引入

import Clipboard from 'clipboard' 

<div class="con-copy">
            对公汇款账号：{
   
   { copyText }} &emsp;<button
              id="copy_text"
              class="copy_text"
              :data-clipboard-text="copyText"
              @click="handleCopyFun"
            >
              <img
                class="block cover"
                src="../../../../assets/imgs/my/copy.png"
                alt=""
              />
            </button>
          </div>

let copyText = ref("复制内容");
// 操作：点击了复制按钮
const handleCopyFun = () => {
  let clipboard = new Clipboard("#copy_text");
  clipboard.on("success", (e) => {
    ElMessage.success("复制成功");
    clipboard.destroy(); // 释放内存
  });
  clipboard.on("error", (e) => {
    // 不支持复制
    ElMessage.warning("该浏览器不支持自动复制");
    clipboard.destroy(); // 释放内存
  });
};