vue随机生成二维码

前端 专栏收录该内容
44 篇文章 1 订阅

vue随机生成二维码

今天接到一个任务就是在页面加入一个二维码,不同的用户有不同的二维码,搜了很多的资料最后搜到一个比较适合我的业务的

1. npm install qrcodejs2
2.引入代码 html
<div
   id="qrcode"
></div>
3.引入js代码
import QRCode from "qrcodejs2"
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.$nextTick(function () {
      this.qrcode();
    })
  },
  methods: {
    //  生成二维码
    qrcode () {
      var qrcode = new QRCode("qrcode", {
        width: 180,
        height: 180,
      });
      function makeCode () {
        qrcode.makeCode(localStorage.getItem('phone'));
      }
      makeCode();
    }
  },

}
4.css代码
<style lang="less">
#qrcode {
  margin-top: 15px;
}
//二维码居中
img {
  margin: 0 auto;
}
</style>
5.在想要引入的页面进行注册
 components: {
    Qrcode
  },
6.组件的完整代码
<template>
  <div>
    <div
      id="qrcode"
      style="margin: 0 auto;"
    ></div>
  </div>
</template>
<script>
/* eslint-disable */
import QRCode from "qrcodejs2"
export default {
  data () {
    return {

    }
  },
  mounted () {
  //防止报错
    this.$nextTick(function () {
      this.qrcode();
    })
  },
  methods: {
    //  生成二维码
    qrcode () {
      var qrcode = new QRCode("qrcode", {
        width: 180,
        height: 180,
        // text: 'http://localhost:8080/#/index'
      });
      function makeCode () {
      //
        qrcode.makeCode("http://192.168.0.102:80/#/index?code=" + localStorage.getItem('phone'));
      }
      makeCode();
    }
  },

}
</script>
<style lang="less">
#qrcode {
  // width: 160px;
  // height: 160px;
  margin-top: 15px;
}
img {
  margin: 0 auto;
}
</style>

  • 0
    点赞
  • 0
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值