vue-qr

• yarn add vue-qr

• 在使用的组件中引入

import vueQr from 'vue-qr'

• 使用

<vue-qr :logoSrc="imageUrl" :text="test" :size="200"></vue-qr>

<script>
import vueQr from "vue-qr";
export default {
  components: {
    vueQr
  },
  data() {
    return {
      imageUrl: require("../../assets/img/login/Wechated.png"),
      text: " "
    };
  },
  mounted() {
    setTimeout(() => {
      this.text = "weixin://wxpay/bizpayurl?pr=eGLPLgu";
    }, 3000);
  }
};
</script>

qrcode

• npm install --save qrcodejs2

• import QRCode from 'qrcodejs2'

• 使用

<div class="qrcode" ref="qrCodeUrl"></div>
 
<script>
methods: {
    creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'xxxx', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },
},
mounted() {
    this.creatQrCode();
},
</script>