之前收藏了一篇制作二維碼的文章，今天得空自己實(shí)現(xiàn)下。實(shí)現(xiàn)步驟如下：

一、在已有的vue環(huán)境下安裝vue-qr：

? ? ? ? npm install vue-qr --save

? ? ? ? 命令執(zhí)行結(jié)束時(shí)可以看見(jiàn)版本號(hào)表示安裝成功。

二、在新建的vue文件中導(dǎo)入并使用VueQr組件

引入該組件并進(jìn)行注冊(cè)

? ?三、在template中使用該組件

配置完屬性后頁(yè)面刷新就可以了

四、組件中的屬性說(shuō)明

? ? ? ? logo-src：嵌入二維碼中心的logo地址，一般可設(shè)置為圖片（例如加微信好友的二維碼中間logo是自己的微信頭像）；

? ? ? ? size：二維碼大小。尺寸，長(zhǎng)寬一致，包含外邊距；

? ? ? ? margin：二維碼的外邊距，默認(rèn)是20px；

? ??????colorDark：二維碼的實(shí)點(diǎn)顏色；

????????colorLight:?空白區(qū)的顏色；

? ? ? ? auto-color：如果為true，二維碼背景圖的主要顏色將作為實(shí)點(diǎn)顏色，即colorDark；

? ??????dot-scale:(0?<?scale?<?1.0f)?數(shù)據(jù)區(qū)域點(diǎn)縮小比例。讓數(shù)據(jù)保持原來(lái)尺寸，如果連接長(zhǎng)，可以用縮放，如果不長(zhǎng)，就設(shè)置為1，以防生成的二維碼密密麻麻還不縮放；

? ? ? ? text：二維碼掃碼后出現(xiàn)的內(nèi)容。如果是文字則直接顯示，如果是鏈接則跳轉(zhuǎn)至該鏈接頁(yè)面；

? ? ? ? logoMargin：logo-src周圍的空白邊框,?默認(rèn)為0；

? ??????whiteMargin:?如果為?true,?背景圖外將繪制白色邊框；

? ??????logoScale:?用于計(jì)算?LOGO?大小的值,?過(guò)大將導(dǎo)致解碼失敗,?LOGO?尺寸計(jì)算公式?logoScale*(size-2*margin)，默認(rèn)?0.2f；

? ?????logoCornerRadius:?標(biāo)識(shí)及其邊框的圓角半徑,?默認(rèn)為0；

? ?????binarize: 如果為?true,?圖像將被二值化處理,?未指定閾值則使用默認(rèn)值；

? ? ? ?binarizeThreshold:(0?<?threshold?<?255)?二值化處理的閾值；

? ?????callback:?生成的二維碼data url 可以在回調(diào)中取得,第一個(gè)參數(shù)為二維碼 data url,?第二個(gè)參數(shù)為?props?傳過(guò)來(lái)的id(因?yàn)槎S碼生成是異步的,所以加個(gè)?id?用于排序)；

? ? ? ?bindElement:?指定是否需要自動(dòng)將生成的二維碼綁定到HTML上,?默認(rèn)是true。

小伙伴們有空也可以自己試試呀>_<

? ??????

? ??????