element-ui 弹窗复制链接下载码

<template>
    <el-dialog
      title="小程序路径"
      :visible="true"
      v-if="dialogVisible"
      width="750px"
      :before-close="() => { dialogVisible = false; }"
      >
      <div class="code-content">
        <div class="ub">
          <div class="code-image" >
              <img :src="codeData.mpqrcode"/>
          </div>
          <div class="code-path-container">
            <span class="code-text">路径地址</span>
            <div class="code-path">
              <el-input :value="codeData.mppage" readonly></el-input>
              <el-button type="success" @click="copyRedEnvelopePathHandler">复制</el-button>
            </div>
            <span class="code-text c-blue" @click="downloadImageHandler">下载小程序码</span>
          </div>
        </div>
      </div>
    </el-dialog>

</template>

<script>
  import Clipboard from 'clipboard';
  export default {
    data() {
      return { 
      dialogVisible: false, 
      codeData: {}
      }
    },
    props: {
       
    },
    methods: {
      showDialog(data){
        this.dialogVisible = true;
        this.codeData = data;
      },

      downloadImageHandler() {
        window.open( this.codeData.mpqrcode + '?attname=小程序码.jpg');
      },

      copyRedEnvelopePathHandler() {
        let self = this;

        self.$data.clipboardInstance && self.$data.clipboardInstance.destroy();

        let clipboard = new Clipboard('.code-path .el-button', {
          text: function() {
            return self.$data.codeData.mppage || ''
          }
        });

        clipboard.on('success', function() {
          self.$message.success('小程序路径复制成功！');
        });

        clipboard.on('error', function() {
          self.$message.error('小程序路径复制失败！');
        });

        this.$data.clipboardInstance = clipboard;
      },
    },
    watch: {}
  }
</script>



<style lang="scss" scoped>
.code-content {
  padding: 10px 10px 35px 10px;
}
.code-image {
  padding-right: 60px;
  border-right: 1px solid #E4E7ED;
  img {
    width: 220px;
    height: 220px;
  }
}

.el-input {
  margin-right: 10px;
  width: 320px;
}

.el-button {
  padding: 11px 13px;

}

.el-link {
  margin-top: 20px;
}


.code-path-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  margin-left: 20px;
}

.code-path {
    display: flex;
    margin-top: 10px;
  }

.code-text {
    margin-top: 20px;


    &:first-child {
      margin-top: 0;

    }

    &:last-child {
      cursor: pointer;
    }
  }

</style>