基于 vue 开发的常用组件库

demo

适用于个人项目 或 需求不是特别复杂项目。

[TOC]

test

git clone https://github.com/Roc-zhou/rz-vue-module.git

cd rz-vue-module

npm or yarn install

npm run dev

http://localhost:8080/

安装

npm install --save rz-vue-module or cnpm install --save rz-vue-module
yarn add rz-vue-module

使用 main.js (全局注册)

// 全局注册
import RZ from 'rz-vue-module'
Vue.use(RZ)

按需引入

// HelloWorld.vue
import Page from 'rz-vue-module/lib/Page'

components: {
  Page
}

Page 分页组件

先上图

// 直接使用
<Page :page-index="2" :total="20" :page-size="8" @change="changeone"></Page>

props

属性	说明	类型	默认值
perPages	页面中的可见页码，其他的以...替代, 必须是奇数	Number	5
pageIndex	当前页码	Number	1
pageSize	每页显示条数	Number	10
total	总数	Number	20

events

事件名	说明	返回值
change	切换页码	当前页码

Timer 倒计时组件

使用

<Timer class="app-timer" @start="getCode" v-model="active"></Timer>

props

属性	说明	类型	默认值
focus	默认展示的文案	String	获取验证码
time	时间	Number	60
template	动态变化的文案	String	{{time}} S
blur	倒计时完毕后文案	String	再次发送
value	是否激活	Boolean	false

events

事件名	说明	返回值
start	点击开始	fasle or true

CountUp 数字动画组件

使用

<CountUp :endVal="num" class="CountUp"></CountUp> // 样式自己定义

props

属性	说明	类型	默认值
startVal	从 多少 开始	Number	0
decimalPlaces	小数位数	Number	0
duration	动画持续时间	Number	2
useGrouping	example: 1,000 vs 1000 (true)	Boolean	true
useEasing	ease animation (true)	Boolean	true
separator	grouping separator (',')	String	，
decimal	decimal ('.')	String	.
prefix	前缀	String	-
suffix	后缀	String	-
delay	延迟几秒加载	Number	0
endVal	结束值，即动画结束后显示的数值	Number	必传！

更多选项 demo

QrCode 二维码

原组件 vue-qr github https://github.com/Binaryify/vue-qr 更多详细 请访问 vue-qr

<RzCode :text="'https://roc-zhou.github.io/rz-vue-module/'"></RzCode>

props

属性	说明	类型	默认值
text	欲编码的内容	String	''
correctLevel	容错级别 0-3	Number	0
size	尺寸, 长宽一致, 包含外边距 默认200	Number	200
margin	二维码图像的外边距, 默认 20px	Number	20
bgSrc	欲嵌入的背景图地址	String	''
gifBgSrc	欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能	String	''
backgroundColor	背景色	String	'#fff'
logoSrc	嵌入至二维码中心的 LOGO 地址	String	''
logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2	Number	0.2
logoMargin	LOGO 标识周围的空白边框, 默认为0	Number	0
logoBackgroundColor	Logo 背景色,需要设置 logo margin	String	''
logoCornerRadius	LOGO 标识及其边框的圆角半径, 默认为0	Number	0
whiteMargin	若设为 true, 背景图外将绘制白色边框	Boolean	true
dotScale	数据区域点缩小比例,默认为1 (0 < scale < 1.0)	Number	1

events

事件名	说明	返回值
change	返回url	url