vue复制盒子内容

复制盒子内容demo

在vue中经常使用到复制这个需求.然后就写个demo.利用clipboard完成复制指定盒子里面的文字

<template>
  <div>
    <button class="copybox" @click="copy" data-clipboard-target="#pursepath1">复制</button>
    <div class="pursepath" id="pursepath1">我是被复制的内容</div>
  </div>
</template>

<script setup >
import ClipboardJS from "clipboard";
const copy = () => {
  const clipboard = new ClipboardJS(".copybox");
  // 这里的dom要对应上标签里点击的按钮的dom
  clipboard.on("success", () => {
    alert("复制成功")
    clipboard.destroy();
  });
};

</script>

demo运行成功截图