vue2复制到剪贴板功能

插件：vue-clipboard2

【是一个很常用的插件，网上教程很多】

 

简单使用：

(1）引入

 

（2）页面代码

<div :class="$style.copyLine">
          <div :class="$style.copyContent">邀请码: {{ code }}</div>
          <div
            v-clipboard:copy="code"
            v-clipboard:success="firstCopySuccess"
            v-clipboard:error="firstCopyError"
            :class="$style.copyBtn"
          >
            复制
          </div>
        </div>

　　

其中v-clipboard:copy的内容就是待复制内容，点击当前div即可复制

 

  data() {
    return {
      code: "231231231",
    };
  },

　　

code就是template中要复制的字段

 

  methods: {
    firstCopySuccess() {
      this.$toast("已复制到剪贴板");
    },
    firstCopyError() {
      this.$toast("复制失败");
    },
}

　　

↑ 复制回调