vue - 使用qrcodejs2生成二维码

你的名字 2021-09-29 09:42 1076阅读 0赞

### 效果图： ###

![在这里插入图片描述][20191010112856472.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]

### 使用过程如下： ###

#### 1、安装 qrcodejs2 ####

npm install  qrcodejs2 --save

#### 2、封装好的二维码组件 ####

<template>
          <div class="qrcode">
             <div class="qrcode_content" :id="name"></div>
          </div>
        </template>
        <script>
        import QRcode from 'qrcodejs2';
        let qrcode = '';
        export default {
          name: 'qrcode',
          data() { 
            return {
        
            }
          },
          computed:{
                name:{
                    get(){
                        let sid = 'qrcode';
                        if(this.sid){
                            sid = this.sid;
                        }
                        return sid;
                    },
                    set(value){
                        this.name = value;
                    }
                },
                value:{
                    get(){
                        let value = 'https://blog.csdn.net/LiaoFengJi';
                        if(this.text){
                            value = this.text;
                        }
                        return value;
                    },
                    set(value){
                        this.value = value;
                    }
                },
                qrwidth(){
                    let width = 0;
                    if(this.swidth){
                        width = this.swidth;            //370*320/(window.innerWidth)/20
                    }
                    else{
                        width = 5.33;                   //250*320/(window.innerWidth)/20
                    }
                    return width;
                }
          },
          props:{
                sid:{
                    type:String
                },
                text:{
                    type:String
                },
                swidth:{
                    type:Number
                }
          },
          methods:{
                qrcode() {  
                    console.log('qrcode---------->',qrcode);
                    if(qrcode){
                        // qrcode.clear();
                        // qrcode.makeCode('new content');
                        qrcode = null;
                    }
                    else{
                         qrcode = new QRcode(this.name, {  
                            width: this.qrwidth*20*(window.innerWidth)/320,  
                            height: this.qrwidth*20*(window.innerWidth)/320, // 高度  ,250*320/(window.innerWidth)/20
                            text: this.value, // 二维码内容
                            image: '',
                            correctLevel : QRcode.CorrectLevel.L  
                            //容错级别，可设置为：(低到高)
                            // QRCode.CorrectLevel.L
                            // QRCode.CorrectLevel.M
                            // QRCode.CorrectLevel.Q
                            // QRCode.CorrectLevel.H 
                            
                            // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
                            // background: '#f0f'  
                            // foreground: '#ff0'  
                        })  
                    }
                   
                    console.log(qrcode)  
                }
          },
          destroyed(){
                // qrcode.clear();
                qrcode = null;
          },
          mounted(){
              this.qrcode();
          }
         }
        </script>
        <style lang="less" scoped>
            @import '../../common/style/style.css';
        </style>

##### style.css文件： #####

.qrcode {
      padding-top: 0.21333333rem;
      padding-bottom: 0.21333333rem;
    }
    .qrcode .qrcode_content {
      display: flex;
      justify-content: center;
    }

#### 3、要生成二维码的页面 ####

<template>
        	<div>
          		<Qrcode sid="url" :text="codeText" :swidth="swidth"></Qrcode>
          	</div>
        </template>
        <script>
        	import Qrcode from '../qrcode/qrcode';
          	export default {
            	data(){
                  return {
                      url:'',
                      codeText:''
                  }
                },
              	components:{
                    Qrcode,
                },
                computed:{
                      swidth(){
                          return ((window.innerWidth*0.9)*0.4)*320/(window.innerWidth)/20;     //370*320/(window.innerWidth)/20
                      }
                 },
                 mounted(){
                      this.url = this.QrcodeUrl;
                      this.codeText = this.QrcodeText;
                  }
            }
        </script>
        <style lang="less" scoped>
            @import '../../common/css/index.css';
        </style>

[20191010112856472.png]: /images/20210812/c8de00b643f14e4e9c2603013dd978f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: /images/20210812/a96da09d2e3e47cab13734d795bd9ab0.png