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
                }
        },
  • 相关阅读:
    20181120-1 每周例行报告
    20181113-2 每周例行报告
    20181030-4 每周例行报告
    20181023-3 每周例行报告
    第六周例行报告
    软件功能说明书final修订
    第十二周——例行报告
    PSP总结报告
    第十一周——例行报告
    PSP Daily软件beta版本——基于NABCD评论,及改进建议
  • 原文地址:https://www.cnblogs.com/hurenjie/p/11890558.html
Copyright © 2011-2022 走看看