dzh-qrcode v1.0.4

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>

自定义属性

贡献

• 段子黄

感谢

• 暂无、期待有你

License

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