vue-qr二維碼外掛使用簡介
阿新 • • 發佈:2019-01-05
官方介紹:https://www.npmjs.com/package/vue-qr
1、安裝
npm install vue-qr --save
2、匯入vue專案中使用
下面給出一個簡單的demo
<template> <vue-qr :text="downloadData.url" :margin="0" colorDark="#f67b29" colorLight="#fff" :logoSrc="downloadData.icon" :logoScale="0.3" :size="200"></vue-qr> </template> <script> import vueQr from 'vue-qr' export default { components: { vueQr }, data() { return { downloadData: { url: '掃碼訪問的連結地址', icon: '隨便一張圖片的地址也行' } } } } </script>
3、常用屬性介紹
text | 二維碼內容 |
size | 二維碼寬高大小,因為是正方形,所以設一個引數即可 |
margin | 預設邊距20px,不喜歡的話自己設為0 |
colorDark | 實點的顏色,注意要和colorLight一起設定才有效 |
colorLight | 空白的顏色,注意要和colorDark一起設定才有效 |
bgSrc | 嵌入背景圖地址,沒什麼卵用,不建議設定 |
logoSrc | 二維碼中間的圖,這個是好東西,設定一下顯得專業點 |
logoScale | 中間圖的尺寸,不要設太大,太大會導致掃碼失敗的 |
dotScale | 那些小點點的大小,這個也沒什麼好糾結的,不建議設定了 |