vue项目中使用生成动态二维码

编程入门行业动态更新时间:2024-10-27 12:37:58

vue<a href=https://www.elefans.com/category/jswz/34/1771421.html style= 项目中使用生成动态二维码"/>

vue项目中使用生成动态二维码

vue项目中使用QRCode.js生成二维码

看了好多blog，也尝试了多种方法，最后在QRCode.js文档上终于看懂了一些，一路踩着坑，终于做出了符合自己心意的东西。

1、环境准备

（1）、首先在项目中安装qrcodejs2：

npm i qrcodejs2

（2）、在组件中调用，我是在哪儿使用哪儿调用的。（ps：在main.js中引入会报错）

2、代码


<template>  <div class="qrBox">    <h3>手机扫描，安全登录</h3>    <div id="qrCode" ref="qrCodeDiv"></div>    <p>      <span @click="reg">免费注册</span>    </p>  </div>
</template><script>  // 引入qrcode  import QRCode from 'qrcodejs2';   export default {        name: "loginCode",      props:['codeName'], //是获取当前时间毫秒数，通过“父传子”方式传递下来data(){         return{            text:''          }      },     methods:{        bindQRCode() {          this.text = this.codeName;      // new QRCode(this.$refs.qrCodeDiv, this.text)          new QRCode(this.$refs.qrCodeDiv, {            text: this.text.toFixed(0), //text必须是字符串width: 180,            height: 180,            colorDark: "#333333", //二维码颜色            colorLight: "#ffffff", //二维码背景色            correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H          })       },        reg(){         this.$router.push("/adminLoginTwo")        }      },     mounted () {        this.$nextTick(function () {          this.bindQRCode();        })      }    }
</script><style scoped lang="stylus">  .qrBox   width: 100%    height: 100%    text-align center   h3      line-height 40px     margin-bottom 20px    #qrCode      width: 180px      height: 180px     margin 0 auto      padding 10px      border 1px solid #ddd    p      line-height 30px      text-align right      margin-top 30px      padding-right 100px      span        cursor pointer
</style>