Using qrcodeJs2 plug-in, the URL automatically generates two-dimensional code

CNPM install qrcodejs2 –save

1. Popover style as shown in the picture, the mouse is placed on the web prompt with a suspension box;

2. The url generated by the parent component this.appAddreSour

<el-dialog title="Scan share" :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()">confirm</el-button>
</div>
</el-dialog>
import qrCode from './qrCode.vue';
components: {
    qrCode
},

Copy the code

3. This. Text is the url path of the file displayed. SRC is the address of the small blue image in the middle.

<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://' // Test the environment
            : 'https://'.// Production environment
    };
  },
  props: {
    path:' '.// The page address that was passed
    flag:' ' // The qr code of the page, the value is 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,        // The URL of the qr code
        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>
Copy the code