vue3的二維碼組件vue3-next-qrcode

更新時(shí)間：2023年09月24日 16:13:17 作者：XiaoDaiGua_Ray

這篇文章主要為大家介紹了vue3的二維碼組件vue3-next-qrcode示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Vue3NextQrcode

使用 TypeScript 基于 awesome-qr.js 與 Vue3 開發(fā)的二維碼組件。支持豐富的配置屬性，并且支持：LOGO、BackgroundImage、GIF 等。簡單配置，即可使用漂亮好看的二維碼～

效果圖

動(dòng)圖（GIF）

標(biāo)志（LOGO）

背景圖（BackgroundImage）

安裝

npm i vue3-next-qrcode

Props 配置項(xiàng)

名稱	類型	默認(rèn)值	說明	版本
watchText	boolean	true	是否啟用自動(dòng)監(jiān)聽內(nèi)容變換后，重新渲染二維碼	*
status	QRCodeStatus	undefined	二維碼狀態(tài)	*
errorDescription	string \	VNode	二維碼已過期	status error 狀態(tài)下的描述文案	*
errorActionDescription	string	重新加載	status error 狀態(tài)下的按鈕描述文案	*
text	string	必填	二維碼填充內(nèi)容	*
size	number	160	二維碼渲染尺寸	*
margin	number	12	二維碼主體周圍的邊距大小（以像素為單位)	*
correctLevel	number	1	二維碼糾錯(cuò)等級（0-3）	*
maskPattern	number	undefined	指定二維碼編碼時(shí)使用的掩碼圖案，接受QRMaskPattern提供的值	*
version	number	undefined	指定二維碼編碼使用的版本，接受[1-40]整數(shù)	*
components	ComponentOptions	{}	用于控制二維碼中的組件的選項(xiàng)	*
colorDark	string	#000000	二維碼上方塊的顏色	*
colorLight	boolean	#ffffff	二維碼上方塊的顏色	*
autoColor	boolean	true	自動(dòng)計(jì)算二維碼背景的colorLight值	*
backgroundImage	string	undefined	二維碼背景圖	*
backgroundDimming	string	rgba(0, 0, 0, 0)	背景圖像上方調(diào)光蒙版的顏色	*
gifBackgroundURL	string	undefined	gif 圖鏈接地址	*
gifBackground	ArrayBuffer	undefined	gif 圖文件流	*
whiteMargin	boolean	true	使用白色邊距而不是透明邊距，透明邊距會顯示邊距上二維碼的背景	*
logoImage	string	undefined	二維碼 logo	*
logoScale	number	0.4	logo 與二維碼尺寸的比例	*
logoMargin	number	6	logo 邊距尺寸	*
logoCornerRadius	number	8	二維碼圓角尺寸	*
dotScale	number	1	塊的實(shí)際大小與完整大小的比率，當(dāng)您想要使背景的更多部分可見時(shí)，這會很有幫助。	*
onSuccess	(dataURL: ArrayBuffer \	string \	undefined) => void	null	二維碼渲染成功回調(diào)	*
onError	(e: unknown) => void	null	二維碼渲染失敗回調(diào)	*
onReload	() => void	null	status error 狀態(tài)下點(diǎn)擊重新加載按鈕回調(diào)，如果使用了 errorAction 插槽該方法不會執(zhí)行	*

Slots

名稱	參數(shù)	說明	版本
errorAction	()	status error 狀態(tài)下的自定義展示樣式	*

使用示例

基礎(chǔ)二維碼

<script lang="ts" setup>
import { Vue3NextQrcode } from 'vue3-next-qrcode'
</script>
<template>
  基礎(chǔ)二維碼
  <Vue3NextQrcode text="hello" />
  LOGO 二維碼
  <Vue3NextQrcode text="hello" logoImage="your logo image" />
  BackgroundImage 二維碼
  <Vue3NextQrcode text="hello" backgroundImage="your logo image" />
</template>

GIF 二維碼

注意：使用 GIF URL 的時(shí)候，應(yīng)該使用 gifBackgroundURL 屬性。

<script lang="ts" setup>
import { Vue3NextQrcode } from 'vue3-next-qrcode'
</script>
<template>
  GIF URL
  <Vue3NextQrcode text="hello" gifBackgroundURL="your gif url" />
  GIF ArrayBuffer
  <Vue3NextQrcode text="hello" gifBackground="your gif ArrayBuffer" />
</template>

項(xiàng)目地址

vue3-next-qrcode

以上就是vue3 的二維碼組件（vue3-next-qrcode）的詳細(xì)內(nèi)容，更多關(guān)于vue3 的二維碼組件（vue3-next-qrcode）的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: