v3-lab-web/src/components/qrCodeDialog/index.vue

<!--  公共二维码dialog组件

1.引入方式

  <qr-code-dialog ref="qrCodeDialog" :qrCodeDialogData="qrCodeDialogData"></qr-code-dialog>

  import qrCodeDialog from "@/components/qrCodeDialog/index.vue"

  components: {
    qrCodeDialog
  },

2.必要参数

  qrCodeDialogData:{},

3.必要方法

  //二维码组件开关
  open(type,id,name){
      this.$set(this,'qrCodeDialogData',{
        title:row.name,                                               //弹窗名称(非必传)
        download:true,                                                //二维码下载按钮(非必传)
        type:'1',                                                     //二维码类型 用于区分二维码功能类型
        parameter:row.id,                                             //二维码参数
        name:row.name,                                                //二维码名称用于下载时命名(非必传)
        codeName:row.name,                                            //二维码图片下名称展示(非必传)
      });
      this.$refs['qrCodeDialog'].initialize();
  },

-->

<template>
  <div>
    <!--添加/编辑弹窗-->
    <el-dialog class="qrCodeDialog" :title="qrCodeDialogData.title?qrCodeDialogData.title:'二维码'"
               :modal-append-to-body="false"
               :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="dialogType" v-if="dialogType" width="394px">
      <vue-qr v-if="dialogType" ref="vueQr" class="qrCodeDialog-vue-qr" :text="vueQrCodeData" :size="200"></vue-qr>
      <canvas class="qrCodeDialog-vue-qr-canvas" id="myCanvas" ref="myCanvas" width="300" :height="qrCodeDialogData.codeName?240:200"></canvas>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="buttonClick(2)">取消</p>
        <p class="dialog-footer-button-primary" @click="buttonClick(1)">下载</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import vueQr from 'vue-qr'
  export default {
    name: 'qrCodeDialog',
    components: {
      vueQr
    },
    props:{
      qrCodeDialogData:{},
    },
    data(){
      return{
        dialogType:false,
        vueQrCodeData:null,
        vueQrImgType:false,
        identification: localStorage.getItem('codeOnlineAdd'),            //二维码规则 服务器域名,需与微信后台开发配置内一致.
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //初始化
      initialize(){
        let self = this;
        this.$nextTick(()=>{
          this.$set(this,'vueQrCodeData', this.identification+'?code='+this.qrCodeDialogData.parameter+'&type='+this.qrCodeDialogData.type);
          this.$set(this,'dialogType',true);
          this.$nextTick(function () {
            // DOM 更新了
            setTimeout(function(){
              //获取二维码数据
              let imgbase64 = self.$refs.vueQr.imgUrl;
              let img = new Image();
              img.src = imgbase64;
              //获取canvas容器
              let myCanvas = document.getElementById( "myCanvas" ).getContext( '2d' );
              //清空画布-设置背景白色
              myCanvas.fillStyle = "#FFFFFF";
              myCanvas.clearRect(0, 0, 300, 240);
              myCanvas.fillRect(0, 0, 300, 240);
              //绘制二维码
              myCanvas.drawImage( img, 50, 0 );
              if(self.qrCodeDialogData.codeName){
                //设置水印
                myCanvas.font = "bold 14px 'Fira Sans'";
                myCanvas.fillStyle = 'rgba(0,0,0,1)'; //水印颜色
                //绘制水印
                myCanvas.fillText(self.qrCodeDialogData.codeName, (300-(self.qrCodeDialogData.codeName.length*14))/2, 215); //左下
              }
            },100);
          })
        })

      },
      buttonClick(type){
        if(type == 1){
          let canvas = this.$refs.myCanvas
          const base64Img = canvas.toDataURL('image/png')
          var a = document.createElement('a') // 生成一个a元素
          var event = new MouseEvent('click') // 创建一个单击事件
          a.download = this.qrCodeDialogData.codeName // 设置图片名称
          a.href = base64Img // 将生成的URL设置为a.href属性
          a.dispatchEvent(event)
        }else{
          this.$set(this,'dialogType',false);
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .qrCodeDialog{
    z-index: 10000;
    font-weight:500;
    .qrCodeDialog-vue-qr{
      position: absolute;
      z-index:-10;
      opacity: 0;
      display: block!important;
      height:200px;
      width:200px;
      margin:20px auto 27px;
    }
    .qrCodeDialog-vue-qr-canvas{
      display: block!important;
      margin:20px auto 27px;
    }
    ::v-deep .el-dialog__body{
      padding:0;
    }
  }
</style>