Vue实现生成二维码

直接引入qrcodejs2

npm install qrcodejs2 --save

代码如下

引入QRCode包

import QRCode from 'qrcodejs2';

 <script>
export default {
  name: "qrCode",
  data() {
    return {}
  },
  mounted: function () {
    this.$nextTick(function () {
      this.bindQRCode();
    })
  },
  methods: {
    bindQRCode: function () {
      new QRCode(this.$refs.qrCodeDiv, {
        text: 'Vue实现生成二维码！',

（text里面可以写要跳转的链接；例如:text:"https://www.baidu.com"）
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
      })
    }
  }
}
</script>

样式如下

<style lang='less'>
#qqq {
  background-color: #111;
  width:300px;
  height:300px;
  margin: 0 auto; /*水平居中*/
  position: relative;
}
 
#qrCode {
  display: inline-block;
  margin: 0 auto; /*水平居中*/
  position: relative;
  top: 15%;
 
  img {
    width: 200px;
    height: 200px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
  }
}
</style>
————————————————
版权声明：本文为CSDN博主「ღ冷风20°C᭄ꦿ࿐」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_50241387/article/details/123549095