vue中生成二维码(中间带logo)
1.vue中使用qrcode一开始使用qrcode生成二维码,查看源码中的参数,似乎不能带logo。单单生成二维码还是很方便的首先输入指令npm install qrcode --save<template><div><qrcode-vuesize="300&qu
·
1.vue中使用qrcode
一开始使用qrcode生成二维码,查看源码中的参数,似乎不能带logo。单单生成二维码还是很方便的
首先输入指令
npm install qrcode --save
<template>
<div>
<qrcode-vue
size="300"
level="H"
:value="codeValue">
</qrcode-vue>
</div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
export default {
data () {
return {
codeValue: ``,
}
},
components: {
QrcodeVue
}
}
</script>
2.可使用vueqr生成中间带图片的二维码
首先,同样输入指令
npm install vue-qr --save
<template>
<div>
<vue-qr :logoSrc="imageUrl" :text="codeValue" :logoScale="50" :size="300"></vue-qr>
</div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
export default {
data () {
return {
imageUrl:'../../src/assets/logo.png',//默认二维码中间图片
}
},
components: {
VueQr
}
}
</script>
传入数据后生成如下二维码
更多推荐
已为社区贡献5条内容
所有评论(0)