vue 生成二维码

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

首先分享一个制作二维码插件
https://www.npmjs.com/package/vue-qr

1.首先支持npm安装

npm install vue-qr --save

2.安装成功之后，在需要的用的vue文件中import 引入组建

import VueQr from ‘vue-qr’
同时
compontents：{
 	VueQr
}

使用

<vue-qr :bgSrc='src1' :margin='30' :logoSrc="src2" text="Hello JacksonYEE" :size="200"></vue-qr>
data(){
	return{
		src1:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3080359710,184417419&fm=27&gp=0.jpg'
		src2:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=571825658,946742261&fm=111&gp=0.jpg'
	}
}

效果如下：

二维码距离黑色边框的margin边距30， 背景图和二维码中间的图片 还有尺寸size

<vue-qr :margin='0' :text="dz" :size='600'></vue-qr>
data(){
	return{
		dz:'www.baidu.com'
	}
}

效果如下

注意：

一些常用属性： （值为动态绑定的时候 属性前要加上‘：’）

text：扫描二维码后展示的文字，可以添加跳转的路径

margin：二维码周围的边距。默认20 ，可以自行设置

bgSrc：加入二维码背景图片

logoSrc 在二维码中间插入图片

size：二维码尺寸

等等还有一些属性 可以参照上边链接 去查看和使用

以上是 vue 生成二维码 的全部内容， 来源链接： utcz.com/z/377468.html

回到顶部