DZH-QRCode

一个自动生成二维码的Vue插件

• 支持4种显示方式 0:不显示LOGO 1:文字且占整行 2:文字居中 3:图片居中
• 支持自定义图片 支持网络图片&本地图片
• 支持自定义文字 文字长度最长支持5位
• 支持 Vue 2.0+

效果

安装

npm install dzh-qrcode --save

或者

yarn add dzh-qrcode --save

使用

注册组件

注册全局组件:

import DZHQRCode from 'dzh-qrcode'

// 全局注册
Vue.component('dzh-qrcode', DZHQRCode)

注册局部组件:

import DZHQRCode from 'dzh-qrcode'

export default {
   	// 局部注册
  	components: { "dzh-qrcode" : DZHQRCode }
}

如何使用

基本使用:

<dzh-qrcode></dzh-qrcode>

更改url地址:

<dzh-qrcode url="http://m.itheima.com/itheima/shenzhen.html"></dzh-qrcode>

使用注意

在使用本地图片的时候，需要使用require加载本地图片

<template>
	<div>
		<dzh-qrcode :img_url="img_url"></dzh-qrcode>
	</div>	
</template>

<script>
import DZHQRCode from 'dzh-qrcode'

export default {
  // 局部注册
  components: { 'dzh-qrcode': DZHQRCode },
  data() {
    return {
      img_url: ''
    }
  },
  created() {
    this.img_url = require('../../statics/site/images/alipay.png')
  }
}
</script>

自定义属性

| key | description | default | options | | :------: | :------------------: | :-------------: | :-----: | | mode | 显示模式 | 4 | Number | | logoSize | logo大小 | 文字 10 图片 28 | Number | | text | 文字(最长显示5位) | 黑马段子黄 | String | | url | 扫描二维码打开的网址 | m.itheima.com | String | | img_url | logo图片地址 | 小猪佩奇的图片 | String | | width | 生成的二维码宽度 | 300 | Number | | height | 生成的二维码高度 | 300 | Number |

贡献

• 段子黄

感谢

• 暂无、期待有你

License

The plugin is open-sourced software licensed under the MIT license.