Vue——前端生成二维码

与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能。方式一:qrcodenpmnp
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

  与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能。

 

方式一:qrcode

  • npm
npm install --save qrcodejs2

只听到从山间传来架构君的声音:
江国多寒农事晚。有谁来对上联或下联?
  • import
此代码由Java架构师必看网-架构君整理
import QRCode from 'qrcodejs2'
  • 使用
<div class="qrcode" ref="qrCodeUrl"></div>

<script>
methods: {
    creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'xxxx', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },
},
mounted() {
    this.creatQrCode();
},
</script>
  • 样式(这里再提供一个给二维码添加边框的小技巧:如下图所示,我们生成的二维码是没有边框的,看起来不是很好看)    

Vue——前端生成二维码

此代码由Java架构师必看网-架构君整理
.qrcode{ display: inline-block; img { width: 132px; height: 132px; background-color: #fff; //设置白色背景色 padding: 6px; // 利用padding的特性,挤出白边 box-sizing: border-box; } }

  

  就有了下面的效果:

Vue——前端生成二维码

 

方式二:vue-qr

  • npm
npm install vue-qr --save
  • import
import vueQr from 'vue-qr'
  • 使用
// logoSrc为logo的url地址(使用require的方式);text为需要转换为二维码的内容
<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>

<script>
    export default {
        name: "qecode",
        data() {
            return {
                imageUrl: require("../assets/logo.png"),
            }
        },
        components: {
            vueQr
        },
    },
}
</script>

  

架构君码字不易,如需转载,请注明出处:https://javajgs.com/archives/36471
0

发表评论