Element UI Vue页面生成二维码的方法

目录

• 一、方法一 采用 qrcodejs2 生成
• • 1.1、安装二维码插件 qrcodejs2
  • 1.2、在 vue 文件中，引入生成二维码插件
  • 1.3、构建二维码对象 qrCodeDiv
• 一、方法二 - 采用 qrcode 生成
• • 2.1、安装 qrcode
  • 2.2、页面引入
  • 2.3、方法里边使用
  • 2.4、options
• 三、方法三 vue-qr
• • 3.1、安装
  • 3.2、页面引入
  • 3.3、组件增加 vue-qr
  • 3.4、template 使用
  • 3.5、options

一、方法一 采用 qrcodejs2 生成

1.1、安装二维码插件 qrcodejs2

// 在终端输入 npm 命令，安装二维码插件

npm install qrcodejs2 --save

1.2、在 vue 文件中，引入生成二维码插件

import QRCode from 'qrcodejs2';        // 在 vue 文件中，引入生成二维码插件

1.3、构建二维码对象 qrCodeDiv

全部代码

    el-dialog
      title=" 微信扫码绑定用户 "
      :visible.sync="isShowCard"
      width="400px"
      center
      :before-close="jieBangClose"
    >
      
      div style="display: flex; justify-content: center">
        
        div id="qrCode" ref="qrCodeDiv">div>
      div>
    el-dialog>
 
// 1. 方法调用 
bangding(row){
      let memberId = row.memberId;
      this.isShowCard = true;
      if(this.ids != null){memberId = this.ids[0];
      }
      this.createQRCode(memberId);
}
//2. 具体的绑定方法
createQRCode(id){this.$nextTick(()=>{
      this.$refs.qrCodeDiv.innerHTML = '';// 二维码清除
      alert(id)
      new QRCode(this.$refs.qrCodeDiv, {
          text: "id="+ id,// 二维码链接，参数是否添加看需求
          width: 200,// 二维码宽度
          height: 200,// 二维码高度
          colorDark: "#333333", // 二维码颜色
          colorLight: "#ffffff", // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
        });
      })
    }

一、方法二 - 采用 qrcode 生成

2.1、安装 qrcode

yarn add qrcode

2.2、页面引入

import QRCode from 'qrcode';

2.3、方法里边使用

getQRCodeUrl(){  
 QRCode.toDataURL(
 'hello world',{
 color: {
 dark:"#010599FF",
 light:"#FFBF60FF"
           }
         }
      )
       .then((url) => {
 // 获取到 url 后即可在页面使用 -- 二维码图片
 console.log('url', url)
       })
       .catch((e) => {console.log('e', e)
       });
 }

2.4、options

三、方法三 vue-qr

3.1、安装

yarn add vue-qr

3.2、页面引入

import VueQr from 'vue-qr'

3.3、组件增加 vue-qr

components: { 
	VueQr 
},

3.4、template 使用

logoSrc 中间 logo

vue-qr style="width:200px;height:200px;" logoSrc="https://www.qianduange.cn/upload/article/NoSlightly.png" text="Hello world!" :size="200">/vue-qr>

3.5、options