vue 生成二维码

2019独角兽企业重金招聘Python工程师标准>>>

1、安装插件

npm install qrcodejs2 --save

2、使用

模板部分

...
<div class="weixin_left"><img src="../../assets/image/WePayLogo.png" class="weixinlogo" ></div>
        <div class="weixin_right">
          <div id="qrcode_id" >
          </div>
          <div>
          <img src="../../assets/image/weipaynote.png"  class="weixinnote" >
          </div>
          <div class="weixintime"><span>{{last_time}}分钟后刷新</span></div>          
        </div>
...

js部分

import QRCode  from "qrcodejs2"

...
  components: {    
    'qrcode':QRCode
  },
...
  data() {
    return {
      code_url:''
    }
  },
...
  methods: {
    ...
    qrcode:function () {        
        var that=this;
        let code_img = new QRCode(document.getElementById("qrcode_id"), {
            width: 200,
            height: 200,        // 高度
            text:  that.code_url,   // 二维码内容
            // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
            background: '#f0f',   // 背景色
            // foreground: '#ff0'    // 前景色
        })
    },
    load_codeimg:function(){
      console.log(this.code_url);
      this.$nextTick(function(){
        var dom=document.getElementById("qrcode_id");
        while (dom.firstChild) {
          dom.removeChild(dom.firstChild);
        }
        this.qrcode();
        this.refreshTime();
      });
    },
    refreshTime:function(){
        //设置当前时间  倒计时30:00
        // var date = new Date();  
        // var now = date.getTime();  
        var minute=30;
        var second='00';        
        //设置截止时间  
        var str="00:00";
               
        //递归每秒调用countTime方法，显示动态时间效果  \
        var that=this;
        var temp_second=0;
        var timer=setInterval(function(){
          var now=minute+':'+second;
          that.last_time=now;
          if(second=='00'){
            minute=minute-1;
            temp_second=59;
          }

          if(temp_second==0){
            second='00';
          }
          else if(String(temp_second).length==1){
            second='0'+temp_second;
          }
          else{
            second=String(temp_second);
          }
          
          temp_second=temp_second-1;
          if(that.last_time==str){
            clearInterval(timer);
            that.load_codeimg();
          }
        },1000); 
    }
    
  }

3、结果

 

转载于:https://my.oschina.net/qingqingdego/blog/3035234