Vue使用qrcode和vue-qr生成二维码

第一种 qrcode

将输入框输入的内容生成二维码

 演示效果 

1.安装

 npm install --save qrcodejs2

2.引入

在需要使用的页面引入

 import QRCode from 'qrcodejs2'

3.使用

html

 // vant的输入框
  
 // vant的按钮
 生成二维码
 // 生成二维码的div
 

css

 .qrcode {
  background-color: #fff;
  padding: 6px;
  box-sizing: border-box;
  margin: 6px;
 }

 .qrCode >>> .van-field__control::-moz-placeholder {
  color: #918b8b !important;
  font-weight: 400;
 }

 .van-button {
  width: 300px;
  margin: 30px auto;
 }

js

   // 按钮的点击事件
   toGenerate() {
      this.$refs.qrCodeUrl.innerHTML = "";
      this.creatQrCode();
    },
    
   // 生成二维码
    creatQrCode() {
      new QRCode(this.$refs.qrCodeDiv, {
        text: this.value, // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },

第二种 vue-qr

 vue-qr跟qrcode的不同之处就是，vue-qr生成的二维码中间可以有一个logo。

看效果

 

1.安装 

 npm install vue-qr --save

2.引入

在需要使用的页面引入

 import vueQr from 'vue-qr'

3.使用

 data() {
    return {
      imageUrl: require("../assets/logo.png"),  // 中间的logo
      value:"生成二维码的内容",
    }
  },


// 在组件中注册一点
  components: {
      vueQr
  },