vue中click.stop使用导致clipboard.js复制失效

思路：

当点击复制按钮是不使用.stop

设置一个状态使得父元素无法使用，过1000ms再打开这个状态使得父组件的方法可以使用

<style lang="less" scoped>
.exchageRecord {
  background: #fff;
  .tt-content {
    .tt-record-list {
      background: #fff;
      padding: 0 14px;
      .tt-record-item {
        display: flex;
        border-bottom: 1px solid #eee;
        padding: 16px 0 12px;
        .item-left {
          img {
            width: 75px;
            height: 75px;
          }
        }
        .item-center {
          flex: 1;
          box-sizing: border-box;
          padding: 0 0 0 16px;
          .center-title {
            font-size: 16px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            padding-bottom: 25px;
          }
          .center-number {
            font-size: 16px;
            font-weight: 400;
            color: rgba(231, 46, 51, 1);
            display: flex;
            padding-bottom: 16px;
            .left-exchange-number {
              flex: 1;
              .old-number {
                padding-left: 5px;
                color: #999;
                text-decoration: line-through;
              }
            }
            .right-exchange-state {
              font-size: 12px;
              line-height: 20px;
            }
            .right-exchange-state.success {
              color: #2ec4b6;
            }
          }
          .center-spend {
            font-size: 14px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 20px;
            padding-bottom: 5px;
            .spend-number {
              color: #000;
            }
          }
          .center-exchange-code {
            display: flex;
            font-size: 14px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 20px;
            padding-bottom: 5px;
            .exchange-wrap {
              flex: 1;
              .exchange-code {
                color: #3e82fe;
              }
            }
            .van-button--mini {
              min-width: 25px;
              height: 17px;
              font-size: 10px;
              line-height: 15px;
            }
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="exchageRecord flex-wrapper">
    <div class="tt-header">
      <div class="left-icon"
           @click="goBack">
        <img src="../..//components/common/image/topBackIcon.png"
             alt="">
      </div>
      <div class="title">订单记录</div>
      <div class="right-icon"></div>
    </div>
    <div class="tt-content">
      <div class="tt-record-list">
        <div class="tt-record-item"
             v-for="(item,index) in 3"
             :key="index"
             @click="goExchangeDetail">
          <div class="item-left">
            <img src="../../components/common/image/shop/百果园备份@3x.png">
          </div>
          <div class="item-center">
            <div class="center-title">QQ音乐付费版12月</div>
            <div class="center-number">
              <div class="left-exchange-number">
                150积分+15元
                <span class="old-number"> 28元</span>
              </div>
              <div class="right-exchange-state"
                   v-if="index==1">
                交易失败
              </div>
              <div class="right-exchange-state success"
                   v-else>
                交易成功
              </div>
            </div>
            <div class="center-spend">消耗积分：<span class="spend-number">150积分</span></div>
            <div class="center-spend">兑换时间：<span class="spend-number">2020.04.09 17:17:59</span></div>
            <div class="center-exchange-code"
                 v-if="index==2">
              <div class="exchange-wrap">
                券码：
                <span class="exchange-code">ABCS-12EFR-343BF</span>
              </div>
              <van-button color="#3e82fe"
                          plain
                          size="mini"
                          class="copy"
                          @click="createCopy"
                          data-clipboard-text="ABCS-12EFR-343BF">复制</van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import closeLoading from '../../mixins/closeLoading'
export default {
  name: 'exchageRecord',
  mixins: [closeLoading],
  components: {},
  props: {},
  data () {
    return {
      userid: this.$route.params.userid,
      copyEnd:true,
    }
  },
  watch: {},
  computed: {},
  methods: {
    goExchangeDetail () {
      if (this.copyEnd) {
        this.$router.push({
          path: '/exchangeDetail/' + this.userid
        })
      }

    },
    goBack () {
      this.$router.go(-1);
    },
    createCopy () {
      this.copyEnd=false;
      setTimeout(() => {
        this.copyEnd=true;
      }, 1000);
      var clipboard = new ClipboardJS('.copy')  //此处为点击的dom的类名
      clipboard.on('success', e => {
        Toast.success({
          message: "券码已拷贝",
          position: "center",
          duration: 1000
        });
        // 释放内存
        clipboard.destroy();
      })
      clipboard.on('error', e => {
        // 不支持复制
        Toast.fail({
          message: "拷贝失败",
          position: "center",
          duration: 1000
        });
        // 释放内存
        clipboard.destroy()
      })
    },
  },
  created () { },
  mounted () { }
}
</script>