600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > Vue生成二维码 自定义插入图片生成logo

Vue生成二维码 自定义插入图片生成logo

时间:2021-03-23 09:02:16

相关推荐

Vue生成二维码 自定义插入图片生成logo

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封禁,这里就不展示了。。。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。