利用Vue生成二维码

Author：kak

vue有两种生成二维码的方式，qrcode、vue-qr（有icon）；

1、qrcode

npm ``install` `--save qrcodejs2
//所需页面导入
import QRCode from 'qrcodejs2'

<div class="qrcode" ref="qrCodeUrl"></div>
<script> import QRCode from 'qrcodejs2' export default { 
     data() { 
     return { 
     }, methods: { 
     creatQrCode() { 
     var qrcode = new QRCode(this.$refs.qrCodeUrl, { 
     text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容 width: 100, height: 100, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H }) }, }, mounted() { 
     this.creatQrCode(); }, }; </script>

在这里插入图片描述

2、vue-qr

可以增加icon

npm install vue-qr --save
import vueQr from 'vue-qr'

<vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
 
<script> export default { 
     name: "qecode", data() { 
     return { 
     imageUrl: require("../img/logo.png"),//icon路径 } }, components: { 
     vueQr }, }, } </script>

在这里插入图片描述

完整代码

<template>
  <div>
    <div class="qrcode" ref="qrCodeUrl"></div>
    <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
  </div>
</template>

<script> import QRCode from "qrcodejs2"; import vueQr from "vue-qr"; export default { 
     data() { 
     return { 
     imageUrl: require("./sw.jpg"), }; }, components: { 
     vueQr, }, methods: { 
     creatQrCode() { 
     var qrcode = new QRCode(this.$refs.qrCodeUrl, { 
     text: "https://blog.csdn.net/weixin_42601136", // 需要转换为二维码的内容 width: 100, height: 100, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H, }); }, }, mounted() { 
     this.creatQrCode(); }, }; </script>


<style scoped> .qrcode { 
     display: inline-block; width: 132px; height: 132px; background-color: #fff; padding: 6px; box-sizing: border-box; } </style>