使用vue-qr
npm
npm install vue-qr --save
import
import vueQr from 'vue-qr'
使用
//logoSrc中央图片或logo的路径
//size设置二维码大小,宽高相等
//text要生成二维码的内容
//margin二维码与边框的距离,可以设置白边
<vue-qr :logoSrc="imageUrl" text="xxx" :size="200" ref="Qrcode"></vue-qr>
<script>
export default {
name: "qecode",
data() {
return {
imageUrl: require("../assets/logo.png"),
}
},
components: {
vueQr
},
methods:{
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)
}
}
},
}
</script>