Clipboard click.stop无法复制问题小记

84 阅读1分钟

经查询clipboard实现基础为事件委托机制,与事件冒泡为强依赖。

<template>
    <div id="copy_code"></div>
    <van-overlay :show="show" @click="show = false">
          <div class="wrapper" @click.stop>
              <div class="btn flex flex_main_center flex_cross_center" @click="copy(code)">复制兑换码,去领取奖品</div>
          </div>
    </van-overlay>

</template>

<script>
import Clipboard from "clipboard";
export default {
  data() {
    return {
      code: "xxxxxx",
    };
  },
  methods: {
    // 复制兑换码
    copy(value) {
      // 解决.stop无法复制问题  模拟点击事件
      this.$nextTick(() => {
        document.getElementById('copy_code').click();
      });
      let clipboard = new Clipboard("#copy_code", {
        container: document.getElementById('copy_code'),
        text: function (trigger) {
          //返回字符串
          return value;
        },
      });
      clipboard.on("success", (e) => {
        //复制成功
        this.$toast("复制兑换码成功,去领取奖品");
        this.show = false;
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        //复制失败
        clipboard.destroy();
      });
    },
  },
};

</script>