安裝vue-qr
npm install vue-qr --save
生成二維碼實列
<vue-qr ref="Qrcode"
:text="qrCodeConfig.text"
:download="downloadFilename"
:margin="10"
:size="200"
:dotScale="qrCodeConfig.dotScale"
:colorDark="qrCodeConfig.colorDark"
>
</vue-qr>
data(){
return {
qrCodeConfig: {
text: 'http://121.40.121.142:8080/register?parent_id='+id,
dotScale: 0.9,
colorDark: '#663300'
},
downloadFilename:''
}
}
屬性介紹
屬性 | 描述 | 舉列 |
---|---|---|
text | 要生成二維碼的內容 | https://segmentfault.com/write |
size | 設置二維碼大小,寬高相等 | 200 |
margin | 二維碼與邊框的距離,可以設置白邊 | 20 |
colorDark | 實點的顏色 | #333 |
colorLight | 空白區的顏色 | #999 |
bgSrc | 欲嵌入的背景圖地址 | https://www.vipbic.com/**.jpg |
gifBgSrc | 欲嵌入的背景圖 gif 地址,設置後普通的背景圖將失效。設置此選項會影響性能 | 200 |
backgroundColor | 背景色 | #666 |
backgroundDimming | 疊加在背景圖上的顏色, 在解碼有難度的時有一定幫助 | #444 |
logoSrc | 中央圖片或logo的路徑 | https://www.vipbic.com/**.jpg |
logoMargin | LOGO 標識周圍的空白邊框 | 1 |
logoBackgroundColor | Logo 背景色,需要設置 logo margin | #888 |
logoCornerRadius | LOGO 標識及其邊框的圓角半徑 | 3 |
下載二維碼
downloadImg () {
const iconUrl = this.$refs.Qrcode.$el.src
let a = document.createElement('a')
let event = new MouseEvent('click')
a.download = '二維碼'
a.href = iconUrl
a.dispatchEvent(event)
}
最終效果
最終代碼
<template>
<div class="full-screen-btn-con">
<Button type="warning" @click="showImage">獲取二維碼</Button>
<Modal
v-model="modal"
title="經濟人二維碼"
>
<div class="code-img">
<vue-qr ref="Qrcode" :text="qrCodeConfig.text" :download="downloadFilename" :margin="10" :size="200" :dotScale="qrCodeConfig.dotScale" :colorDark="qrCodeConfig.colorDark"></vue-qr>
</div>
<div slot="footer">
<Button type="primary" @click="downloadImg">下載二維碼</Button>
<Button type="primary" @click="modal = !modal">關閉</Button>
</div>
</Modal>
</div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
name: 'Fullscreen',
components: {
VueQr
},
data(){
let id = this.$store.state.user.userId;
return {
modal : false,
qrCodeConfig: {
text: 'http://121.40.122.152:8080/register?parent_id='+id,
dotScale: 0.9,
colorDark: '#663300'
},
downloadFilename:''
}
},
methods: {
showImage (sid, key, index) {
this.modal = true
},
downloadImg () {
const iconUrl = this.$refs.Qrcode.$el.src
let a = document.createElement('a')
let event = new MouseEvent('click')
a.download = '二維碼'
a.href = iconUrl
a.dispatchEvent(event)
}
},
mounted () {
}
}
</script>
<style lang="less" scoped>
.code-img{
text-align: center;
}
</style>