欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue——前端生成二維碼的示例

 更新時間：2020年12月19日 16:16:49   作者：劉彤彤  
這篇文章主要介紹了Vue——前端生成二維碼的示例，幫助大家更好的理解和使用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', // 需要轉(zhuǎn)換為二維碼的內(nèi)容
            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為需要轉(zhuǎn)換為二維碼的內(nèi)容
<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——前端生成二維碼的示例的詳細內(nèi)容，更多關于vue 前端生成二維碼的資料請關注腳本之家其它相關文章！

相關文章

最新評論