Vue——前端生成二維碼的示例
與后端生成二維碼相比,前端生成二維碼更具有靈活性,下面就介紹兩種前端生成二維碼的方式,兩種方式相比之下,vue-qr比qrcode多了一個再中間添加logo的功能。
方式一:qrcode npmnpm install --save qrcodejs2 import
import QRCode from ’qrcodejs2’ 使用
<div 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> 樣式(這里再提供一個給二維碼添加邊框的小技巧:如下圖所示,我們生成的二維碼是沒有邊框的,看起來不是很好看)

就有了下面的效果:

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)容,更多關(guān)于vue 前端生成二維碼的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. 解決spring @ControllerAdvice處理異常無法正確匹配自定義異常2. IntelliJ IDEA設(shè)置自動提示功能快捷鍵的方法3. IDEA一鍵完成格式化、去除無用引用、編譯的操作4. JavaScript創(chuàng)建表格的方法5. PHP如何開啟Opcache功能提升程序處理效率6. android H5本地緩存加載優(yōu)化的實戰(zhàn)7. python新手學習使用庫8. 詳解如何使用Net將HTML簡歷導(dǎo)出為PDF格式9. ASP.NET MVC使用jQuery ui的progressbar實現(xiàn)進度條10. PHP程序員簡單的開展服務(wù)治理架構(gòu)操作詳解(二)

網(wǎng)公網(wǎng)安備