vue点击按钮复制文本粘贴

最新推荐文章于 2024-06-27 10:51:27 发布

晓狐狸吖

最新推荐文章于 2024-06-27 10:51:27 发布

阅读量963

点赞数 1

文章标签： vue-cli3 vue.js npm javascript node.js

本文链接：https://blog.csdn.net/qq_38606139/article/details/112602437

版权

vue点击按钮复制文本粘贴

本人通过找资料总结出了两种方法，如下：

一、引入clipboard.js，方法如下：

第一种直接npm安装：npm install clipboard --save
第二种：<script src="js/clipboard.min.js"></script> 下载地址
引入，可以在mian.js中全局引入也可以在单个vue中引入
单页面引用：import Clipboard from “clipboard”;

main.js中全局引入：
import Clipboard from ‘clipboard’;
Vue.prototype.Clipboard=Clipboard;
使用，:data-clipboard-text中即为你要复制的内容

    <span
   class="copybtn"
  @click="copywxtap"
   :data-clipboard-text="productsContent.ProductName"
   >
  {{ productsContent.ProductName }}
   </span>

在methods中调用copy事件

copywxtap() {
      var clipboard = new Clipboard(".copybtn");
      clipboard.on("success", (e) => {
        alert('复制成功')
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Talert('该浏览器不支持自动复制');
        // 释放内存
        clipboard.destroy();
      });
    },

通过构建input实列的方法，不需要引入插件

<span
            @click="copywxtap"
            v-text="datalist.product_name"
            ref="copytext"
          ></span>

在methods方法里面使用：

 copywxtap() {
      this.copyContent = this.$refs.copytext.innerText;//也可以直接写上等于你想要复制的内容
      var input = document.createElement("input"); // 直接构建input
      input.value = this.copyContent; // 设置内容
      console.log(input.value);
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(input); // 删除临时实例
      alert("复制成功");
    },

https://zhuanlan.zhihu.com/p/344160665参考文档