使用qrcodejs2插件，将url网址自动生成二维码

插件下载 cnpm install qrcodejs2 --save

1. 弹窗样式如图，鼠标放上去有悬浮框的网页提示；

2. 父组件 this.appAddreSour生成的url地址

<el-dialog title="扫码分享" :closeOnClickModal="false" v-if="shareCodedialog" :visible.sync="shareCodedialog" width="600px">
    <qrCode :path ="this.appAddreSour" :flag="true" > </qrCode>
    <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="qrclick()">确认</el-button>
</div>
</el-dialog>
import qrCode from './qrCode.vue';
components: {
    qrCode
},

3. 子组件，可以放到项目拿来用，ref绑定组件，this.text是显示的文件url路径，src是中间蓝色小图片地址，可以选择是否设置，图片地址在最后，需要自取；

<template>
  <div class="qrCode" id="qrCode" ref="qrCodeDiv">
    <img class="qrCodeIco" id="qrCodeIco" src="../../images/sd_logo.png" />
  </div>
</template>
<script>
import QRCode from 'qrcodejs2';
export default {
  name: 'qrCode',
  data() {
    return {
      text: '',
      envUrl:process.env.NODE_ENV === 'development'
            ? 'http://' //测试环境
            : 'https://',//生产环境
    };
  },
  props: {
    path:'', // 传过来的页面地址
    flag:'' // 页面的二维码，值为true
  },
  mounted() {
    this.$nextTick(() => {
      this.bindQRCode();
    });
  },
  created() {
    if(this.flag === true) {
    this.text = this.path
    } else {
    this.getAppAddre();
    }
  },
  methods: {
    bindQRCode() {
      new QRCode(this.$refs.qrCodeDiv, {
        text: this.text,        // 二维码的url地址
        width: 200,
        height: 200,
        colorDark: '#333333',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.L,
      });
    },
   },
};
</script>
<style lang="scss">
.qrCode {
  position: relative;
  top: 0;
  left: 190px;
  .qrCodeIco {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 75px;
    left: 75px;
  }
}
</style>