本文主要记录在vue项目中，两个小却比较实用的小功能。

功能点分别是：

1. 一键复制
2. 将页面url生成为二维码

1 使用clipboard实现一键复制功能

实现过程如下：

1. 安装
   npm install clipboard
2. 使用

html：

<div>

    <input v-model="txt" />

    <button

      @click="copyLink"

      data-clipboard-action="copy"

      class="copyDomObj"

      :data-clipboard-text="txt"

    > 点击复制 </button>

  </div>

js:

<script>

import clipboard from "clipboard";

export default {

  name: "Demo",

  data() {

    return {
      txt: "12345",
    };

  },

  methods: {

    // 复制链接
    copyLink() {

      let clipboardObj = new clipboard(".copyDomObj");

      clipboardObj.on("success", function (e) {

        console.log("复制成功", e.text);
        // 释放内存
        clipboardObj.destroy();

      });

      clipboardObj.on("error", function (e) {

        console.log("复制失败", e);
        // 释放内存
        clipboardObj.destroy();

      });

    },

  },

};

</script>

了解更多clipboard，戳这里clipboard官网

2 使用qrcodejs2将页面url生成为二维码

实现过程如下：

1. 安装
   npm install qrcodejs2

2. 使用

html：

// 二维码的容器
<div id="qrcode"></div>

js

<script>

import QRCode from "qrcodejs2";

export default {

  name: "Demo",

  data() {

    return {
      projectId: "32553243",
    };

  },

  methods: {

    //生成二维码
    genQrcode() {
      //组装url
      let shareUrl =
        process.env.VUE_APP_AI_KIT_WEBAPP_BASE_URL +
        "apps/" + this.projectId + "/workspace.html";

      new QRCode("qrcode", {
        width: 160, //二维码宽度
        height: 160, //二维码高度
        text: shareUrl,//二维码对应的url
        colorDark : "#000000",//二维码背景色
        colorLight : "#ffffff",//二维码前景色
        correctLevel : QRCode.CorrectLevel.H//二维码容错等级 L(低) M(中) Q(四分) H(高)
      });
    },
  },

  mounted() {

    this.genQrcode();

  },

};

</script>

了解更多qrcodejs2，戳这里qrcodejs2~npm

运动时间到。music~