[JavaScript知识库]vue中实现点击按钮文本复制-clipboard插件使用

本文内容：vue中实现点击按钮文本复制-clipboard插件使用

很多时候，在自己的项目中实现点击复制功能，这时候非常苦恼，于是乎放弃~

?clipboard.js — Copy to clipboard without Flashhttps://clipboardjs.com/

将文本复制到剪贴板应该不难。它不需要数十个步骤来配置或数百 KB 来加载。但最重要的是，它不应该依赖于 Flash 或任何臃肿的框架。

这就是 clipboard.js 存在的原因。

vue中示例：

?

安装命令： 复制粘贴到自己的vue项目中即可

npm install clipboard --save

?安装完之后在项目中需要用到的界面引入clipboard插件

import Clipboard from "clipboard";

引入之后template代码内容：

 <p>vue复制插件Clipboard使用</p>
      <span>复制内容：</span>

      <input type="text" id="copyVal" v-model="code" />
      <button
        class="p3"
        @click="copy"
        data-clipboard-action="copy"
        data-clipboard-target="#copyVal"
      >
        点击复制
      </button>
      <br />
      <span>复制测试{CTRL+v}</span>
      <input type="text" v-model="code1" />

data数据内容：

data() {
    return {
      code: "风尚云网学习",
      code1: ""
}
}

封装好的methods：

 // Clipboard复制方法
    copy() {
      this.$nextTick(() => {
        var clipboard = new Clipboard(".p3");
        console.log("插件", clipboard);
        clipboard.on("success", (e) => {
          this.$message({
            type: "success",
            message: "复制成功",
          });
          console.info("复制成功做的事情:", e.action);
          console.info("复制成功的文本:", e.text);
          console.info("复制成功触发:", e.trigger);
          e.clearSelection();

          // 释放内存
          clipboard.destroy();
        });
        clipboard.on("error", (e) => {
          console.error("复制错误做的事情:", e.action);
          console.error("复制错误触发:", e.trigger);
          // 不支持复制
          this.$message({
            type: "info",
            message: "不支持自动复制",
          });
          // 释放内存
          clipboard.destroy();
        });
      });
    },

风尚云网的个人小站：?

风尚云网-风尚云搜：我们致力于更快更全的搜索！接口持续更新！敬请期待！！！风尚云网-风尚云搜：我们致力于更快更全的搜索！接口持续更新！敬请期待！！！http://1813783665.3vzhuji.cc/caidan/sou.html

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系