欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue点击按钮复制其他标签内的内容

程序员文章站 2022-05-14 22:56:42
...

用到clipboard.js

  1. 引入clipboard.js
npm install clipboard --save
  1. 在需要使用的vue文件引入
import Clipboard from "clipboard";
  1. 代码
<button
     class="btn"
      data-clipboard-target="#msg" <!--这里绑定的是要复制的标签的id-->
      data-clipboard-action="copy"
      @click="copy" <!--这里是触发的方法-->
    >
  复制
</button>
<div id="msg">这里是要复制的内容</div>
  1. js代码
copy() {
      let clipboard = new Clipboard(".btn");
      clipboard.on("success", () => {
        clipboard.destroy();
      });
      clipboard.on("error", () => {
        clipboard.destroy();
      });
    }

大功告成!!!!!