vue app实现一键复制（pc端也可以）

HouMengFei_

已于 2022-05-11 11:26:44 修改

阅读量386

点赞数 2

文章标签： vue.js javascript 前端

于 2022-05-11 10:59:47 首次发布

本文链接：https://blog.csdn.net/HouMengFei_/article/details/124705408

版权

本文介绍了如何在Vue应用中使用Clipboard插件，通过全局引入并挂载到原型，然后在页面中创建一个可以点击的按钮，实现下载链接的快速复制。详细步骤包括引入插件、配置Vue实例以及处理复制成功和失败的回调。

摘要由CSDN通过智能技术生成

标题使用Clipboard插件

下载插件

npm install clipboard

然后引入

// 全局中引入 main.js
import clipboard from 'clipboard'
Vue.prototype.clipboard = clipboard

// 局部引入
import clipboard from 'clipborad'

页面中

<div>
  <div style="margin:0 0 1rem" v-html="downloadLink">{{ downloadLink }}</div>
   <van-button
     type="info"
     size="mini"
     :data-clipboard-text="downloadLink"
     @click="copyFn"
     id="copy_title"
     >一键复制</van-button>
 </div>
 <script>
 import Clipboard from "clipboard";
 methods: {
    copyFn() {
      var clipboard = new Clipboard("#copy_title");  //拿到按钮的id
      clipboard.on("success", e => { //复制成功
        Toast("复制成功");
        clipboard.destroy();
      });
      clipboard.on("error", e => {  //失败
        Message({
          message: "该浏览器不支持复制",
          type: "warning"
        });
        clipboard.destroy(); //清除缓存
      });
    },
    }
 </script>