vue项目中自动生成二维码

vue项目中自动生成二维码

• 我们在做vue项目时，很多时候要用到生成二维码的功能，今天给大家介绍一个有前端生成二维码的小例子：
  1、安装vue-qr：

npm isntall vue-qr --save

2、在组件中引入

<template>
	<div>
		<vue-qr :logoSrc="imgPath" :text="value" :colorDark="stype" :size="150"></vue-qr>
	</div>
</template>

<script>
	// 引入vue-qr
	import VueQr from 'vue-qr'
	export default{
		name: 'qr',
		data(){
			// 要显示的值，如果为跳转地址加http：//
			value: '我是二维码生成的内容',
			// value: 'http://www.baidu.com',
			imgPath: require('../assets/logo.png'),
			stype: '#0f0',
		},
		// 挂载
		components:{
			VueQr
		}
	}
</script>

• vue-qr的配置

bgSrc —— 背景图
logoSrc —— 欲嵌入至二维码中心的 LOGO 地址
colorDark —— 实点颜色
colorLight —— 空白区颜色
dotScale —— 数据区域点缩小比例