Vue——前端生成二維碼的示例
與后端生成二維碼相比,前端生成二維碼更具有靈活性,下面就介紹兩種前端生成二維碼的方式,兩種方式相比之下,vue-qr比qrcode多了一個(gè)再中間添加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> 樣式(這里再提供一個(gè)給二維碼添加邊框的小技巧:如下圖所示,我們生成的二維碼是沒(méi)有邊框的,看起來(lái)不是很好看)

就有了下面的效果:

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——前端生成二維碼的示例的詳細(xì)內(nèi)容,更多關(guān)于vue 前端生成二維碼的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享2. ASP中實(shí)現(xiàn)字符部位類(lèi)似.NET里String對(duì)象的PadLeft和PadRight函數(shù)3. 解析原生JS getComputedStyle4. CSS可以做的幾個(gè)令你嘆為觀(guān)止的實(shí)例分享5. ASP實(shí)現(xiàn)加法驗(yàn)證碼6. 利用CSS3新特性創(chuàng)建透明邊框三角7. 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論8. vue前端RSA加密java后端解密的方法實(shí)現(xiàn)9. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)10. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能

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