整理之前用的一些插件
生成二維碼的插件有蠻多棍厌，例如：qrcode肾胯、vue-qriously竖席、vue-qr等，
不過(guò)我采用的vue-qr敬肚，因?yàn)槌丝梢陨啥S碼毕荐，還可以在二維碼中間加logo
<template>
<div class="vue-qr">
<vue-qr :logoSrc="config.logo"
:text="config.value"
:size="52"
:margin="0"
ref="Qrcode"
class="vue-qr-img"></vue-qr>
<el-button type="primary"
class="tag-copy"
:data-clipboard-text="config.value"
@click="copyShareLink">復(fù)制二維碼</el-button>
<a :href="exportLink" @click="downloadImg" :download="downloadFilename">下載二維碼</a>
</div>
</template>
<script>
import VueQr from 'vue-qr' //生成二維碼
import Clipboard from 'clipboard';//復(fù)制
export default {
components: {
VueQr
},
data() {
return {
config: { //二維碼參數(shù)
value: 'https://element.eleme.cn/#/zh-CN/component/layout',//顯示的值、跳轉(zhuǎn)的地址
logo: require('../../assets/img/logo.jpg'),//中間logo的地址
},
exportLink: '',
downloadFilename: ''
}
},
methods:{
// 復(fù)制鏈接
async copyShareLink() {
let clipboard = new Clipboard('.tag-copy')
await clipboard.on('success', e => {
showNotification('success', '鏈接復(fù)制成功,請(qǐng)到微信打開(kāi)艳馒！')
clipboard.destroy() // 釋放內(nèi)存
})
clipboard.on('error', e => {
showNotification('warning', '該瀏覽器不支持自動(dòng)復(fù)制憎亚！') // 不支持復(fù)制
clipboard.destroy() // 釋放內(nèi)存
})
},
// 下載二維碼圖片
downloadImg () {
let Qrcode = this.$refs.Qrcode
this.exportLink = Qrcode.$el.currentSrc
this.downloadFilename = '二維碼'
}
}
}
</script>
除此之外還可以設(shè)置背景圖等等，詳細(xì)的請(qǐng)看vue-qr
