Vue生成二维码,自定义插入图片生成logo
vue-qr是一个很棒的制作二维码开源库,github地址:/Binaryify/vue-qr
1.安装vue-qr
npm install vue-qr --save
2.在需要用到的文件中引入
import vueqr from "vue-qr";
3.在script组件中加入vue-qr
components: {vueqr,},
4.在template中加入vue-qr组件
<vue-qr:correctLevel="3" :autoColor="false"colorDark="#000000":text="qrText"//这个一个变量,需要在data中定义:logoSrc="icon_url"//这个一个变量,需要在data中定义:logoScale="0.28":size="300"/>
参数说明
5.在script数据中加入text和logoSrc绑定的变量,可以生成logo图片,如下:
data() {return {qrText: "Hello",icon_url:require("@/assets/logo.png")}}
qrText就是二维码的编码内容,图片可以放在assets文件夹下,这样就可以生成带logo的二维码。演示网址:https://www.1tool.site/#/qrcode?id=2
含有二维码的图片都会被CSDN封禁,这里就不展示了。。。