1. install with NPM
npm install vue-qr --save
2. demo
<template>
<el-card class="channelBox" v-for="(item, index) in channels" :key="index" shadow="always" :body-style="{ padding: '0px' }">
<div class="channelHead">
<span class="channelId">{{item.channel_id}}</span>
<div class="channelName" @click="changeName(item)">{{item.channel_name}}</div>
</div>
<div class="channelQrcode" @click="bigQrcode(item)">
<vue-qr :text="item.channel_qr_url" :size="120" :margin="0"></vue-qr>
</div>
<div class="channelBtn">
<el-button @click="isDelete(item.channel_id)" type="text" style="color:#F56C6C;">刪除</el-button>
<el-button type="text" style="color:#67C23A;" @click="downloadImg(index, item)">下載</el-button>
</div>
</el-card>
<script>
import vueQr from 'vue-qr' export default { components: { vueQr }, data() { return { channels: [] } }, methods: { // 下載渠道二維碼圖片 downloadImg (index, item) { var oQrcode = document.querySelectorAll('.channelQrcode img') var url = oQrcode[index].src var a = document.createElement('a') var event = new MouseEvent('click') // 下載圖名字 a.download = item.channel_name a.href = url // 合成函數，執行下載 a.dispatchEvent(event) } } } </script>
3. 常用屬性介紹
| 屬性 | 說明 |
| text | 二維碼內容 |
| size | 二維碼寬高大小，因為是正方形，所以設一個參數即可 |
| margin | 默認邊距20px，不喜歡的話自己設為0 |
| colorDark | 實點的顏色，注意要和colorLight一起設置才有效 |
| colorLight | 空白的顏色，注意要和colorDark一起設置才有效 |
| bgSrc | 嵌入背景圖地址，沒什么卵用，不建議設置 |
| logoSrc | 二維碼中間的圖，這個是好東西，設置一下顯得專業點 |
| logoScale | 中間圖的尺寸，不要設太大，太大會導致掃碼失敗的 |
| dotScale | 那些小點點的大小，這個也沒什么好糾結的，不建議設置了 |