Vue――前端生成二维码的示例

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

方式一：qrcode

• npm

npm install --save qrcodejs2

• import

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-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>

以上就是Vue――前端生成二维码的示例的详细内容，更多关于vue 前端生成二维码的资料请关注华域联盟其它相关文章！

您可能感兴趣的文章:

• springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）
• vue 二维码长按保存和复制内容操作
• Vue实现手机扫描二维码预览页面效果
• vue中实现动态生成二维码的方法
• Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
• 在Vue中用canvas实现二维码和图片合成海报的方法

本文由 华域联盟 原创撰写：华域联盟 » Vue――前端生成二维码的示例

转载请保留出处和原文链接：https://www.cnhackhy.com/44298.htm