Vue——前端生成二維碼的示例
更新時(shí)間：2020年12月19日 16:16:49 作者：劉彤彤
這篇文章主要介紹了Vue——前端生成二維碼的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
與后端生成二維碼相比，前端生成二維碼更具有靈活性，下面就介紹兩種前端生成二維碼的方式，兩種方式相比之下，vue-qr比qrcode多了一個(gè)再中間添加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>
- 樣式（這里再提供一個(gè)給二維碼添加邊框的小技巧：如下圖所示，我們生成的二維碼是沒有邊框的，看起來不是很好看）
就有了下面的效果：
方式二：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——前端生成二維碼的示例的詳細(xì)內(nèi)容，更多關(guān)于vue 前端生成二維碼的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue transition實(shí)現(xiàn)點(diǎn)贊動畫效果的示例
點(diǎn)贊動畫是網(wǎng)頁評論中常見的功能，本文將介紹如何用vue實(shí)現(xiàn)這一效果。點(diǎn)贊時(shí)愛心縮小變大，變大時(shí)略微大一點(diǎn)再變正常，取消點(diǎn)贊時(shí)愛心無動畫，同時(shí)數(shù)字滾動，+1 時(shí)向上滾動，-1 時(shí)向下滾動2021-05-05
vue-cropper組件實(shí)現(xiàn)圖片切割上傳
這篇文章主要為大家詳細(xì)介紹了vue-cropper組件實(shí)現(xiàn)圖片切割上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了使用vue組件封裝共用的組件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了在Vue3組合式API中如何優(yōu)化列表渲染性能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
本文是作者通過實(shí)際項(xiàng)目的優(yōu)化實(shí)踐進(jìn)行總結(jié)而來，希望讀者讀完本文，有一定的啟發(fā)思考，從而對自己的項(xiàng)目進(jìn)行優(yōu)化起到幫助2022-08-08
在vue中使用防抖和節(jié)流,防止重復(fù)點(diǎn)擊或重復(fù)上拉加載實(shí)例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復(fù)點(diǎn)擊或重復(fù)上拉加載實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
下面小編就為大家分享一篇vue.js select下拉框綁定和取值方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue項(xiàng)目之index.html如何引入JS文件
這篇文章主要介紹了vue項(xiàng)目之index.html如何引入JS文件問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了基于Vue實(shí)現(xiàn)微信小程序的圖文編輯器,由于微信小程序不能使用常規(guī)的圖文編輯器(比如百度的UEditor )編輯新聞內(nèi)容之類的，所以用vue寫了個(gè)針對小程序用的圖文編輯器需要的朋友可以參考下2018-07-07
Vue中實(shí)現(xiàn)動畫效果的多種方法小結(jié)
平時(shí)我們能在網(wǎng)頁上看到很多動畫效果,這些效果看起來就很引人注目,我們是不是也可以在自己的項(xiàng)目中添加一些動畫效果,讓我們的頁面看起來更加的高端大氣上檔次,博人眼球,所以本文給大家介紹了Vue中實(shí)現(xiàn)動畫效果的多種方法,需要的朋友可以參考下2024-07-07