zoukankan      html  css  js  c++  java
  • VUE/jQuery生成二维码扫描跳转地址

    接到需求,在一个管理系统上,需要将该条信息在点击相关操作的时候生成一个二维码并且扫描之后跳转相应地址

    在vue中的话,首先需要利用npm命令下载一个插件到package.json中,命令:npm install --save qrcode

    "qrcode": "^1.4.4",
    "qrcodejs2": "0.0.2",
    就是这个东西,然后引入到页面:import QRCode from 'qrcodejs2'
    在界面上的数据
      <div class="special" v-show="key" >  
           <div id="qrCode" ref="qrCodeDiv"></div>
        </div>

    注意,如果控制二维码的显示隐藏一定要是v-show,如果是v-if那么在进行new创建的时候,由于没有页面结构,项目会报错

    js代码

     look(index,row){
                console.log(row.jcgId)
                if(this.key==false){
                  this.key=true
                  
                if(this.testa!=null){//清除new的图示
                  this.testa.clear()
                }else{
                this.testa = new QRCode(this.$refs.qrCodeDiv, {
                    text: 'http://yun.51quyd.com/addPlote.html?jcgId='+row.jcgId,
                     200,
                    height: 200,
                    colorDark: "#333333", //二维码颜色
                    colorLight: "#ffffff", //二维码背景色
                    correctLevel: QRCode.CorrectLevel.L//容错率,L/M/H
                       })
                }
                  this.testa.clear() //清除二维码 
                  this.testa.makeCode('http://yun.51quyd.com/addPlote.html?jcgId='+row.jcgId) //生成另一个新的二维码
                }else{
                  this.key=false
                }
        },
  • 相关阅读:
    UI和3D物体的堆叠响应
    UI中的事件系统EventSystem
    UI的管理
    学习笔记--2020年12月30日
    Java集合框架
    Java基本数据类型
    数据存储
    intent和手势探测
    即时消息Toast和对话框
    Android事件处理的三种方法
  • 原文地址:https://www.cnblogs.com/hurenjie/p/11890558.html
Copyright © 2011-2022 走看看