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)"> download </ EL-Button>
</div>
</el-card>
<Script>
Import from vueQr 'VUE-QR'
Export default {
Components: {
vueQr
},
Data () {
return { channels: [] } }, Methods: { // download channel two-dimensional code image downloadImg (index, item) { var oQrcode document.querySelectorAll = ( '. channelQrcode IMG' ) = var URL oQrcode [index] = a .src var document.createElement ( 'a' ) = var new new Event the MouseEvent ( 'the Click' ) // name of a download FIG. = .download item.channel_name a.href = URL // synthesis function, the download a.dispatchEvent (event)}}} < / script>
3. Description common attributes
| Attributes | Explanation |
| text | Two-dimensional code content |
| size | Size width and height two-dimensional code, because it is square, you can set a parameter |
| margin | Default margins 20px, do not like it myself to 0 |
| colorDark | The real point of the color, pay attention to set up together to be effective and colorLight |
| colorLight | Blank color, attention to set up together to be effective and colorDark |
| bgSrc | BACKGROUND FIG embedded address, with no eggs, not recommended to set |
| logoSrc | The middle of the two-dimensional code pattern, this is a good thing, setting it look professional point |
| logoScale | The size of the middle figure, do not set too much, too large lead to the failure of the scan code |
| dotScale | Those little bit of size, this has nothing tangled, I do not recommend setting up |