README
引入组件库
npm i --save @mizlicai/mz-ui
import mzui from '@mizlicai/mz-ui'
import '@mizlicai/mz-ui/dist/css/mz-ui.css'
Vue.use(mzui) // 注册组件到全局
组件使用说明
loading
在屏幕中间生成一个loading状态
this.$loading.open(String) // 打开loading 可加文字
this.$loading.close() // 关闭loading
toast
在屏幕中间生成一个白色字黑色半透明背景提示
this.$toast.open(String) // 生成toast 可加文字
this.$toast.open({text: '文字', icon: '是否加icon', iconSize: '同icon控件size', time: '指定时间消失'})
this.$toast.close() // 关闭toast,非手动关闭情况下 默认2秒自动消失
alert
在屏幕中间生成一个带标题/文字/1(确定)到2个按钮(确定,取消)的提示框
cmd mode:
this.$alert({
title: String, // 标题
text: Array || String, // 文字
okTxt: String, // 确定按钮文字,默认“确定”
quitTxt: String, // 取消按钮文案,默认“取消”
btns: Number, // 几个按钮,目前支持1|2个按钮,默认1个
okCb: Function, // 确定的回调
quitCb: Function // 取消的回调
type: String // 样式类型 默认风格或ios风格
closeBtn: Boolean || String // 是否有关闭按钮 若有 内容为"bottom"关闭按钮则在底部 默认在右上角
mode: String // 生成模式 template:模版模式 cmd:命令模版
})
template mode:
<v-alert ref="alert" title="" text="" okTxt="" quitTxt="" btns="" type="" closeBtn @ok="" @quit=""><slot></slot></v-alert>
template mode 调用:
this.$refs.alert.open()
button
生成一个可点击或不可点击的可定制多种样式的按钮
example:
<v-button type="" size="" icon="" href="" disabled loading inline circle @click="">button</v-button>
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 按钮类型,可选值为primary /success /warning /error |
string | - |
size | 按钮大小,可选值为xl /lg /md /sm /xs |
string | md |
href | 可添加跳转链接 | string | javascript:; |
icon | 添加icon按钮,暂无 | string | - |
loading | 是否加载中(true则显示加载icon) | boolean | false |
disabled | 是否不可用 | boolean | false |
inline | 是否行内元素 | boolean | false |
circle | 是否全圆角 | boolean | false |
onclick | 点击事件 | function | - |
icon
生成一个基于iconfont的icon图标
example:
<v-icon icon="" type="" size=""></v-icon>
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | icon颜色类型,可选值为normal /light /default /success /warning /error |
string | normal |
size | icon大小,可选值为xl /lg /md /sm /xs |
string | md |
icon | 对应的icon图标 | string | - |
input
生成一个可输入或不可输入内容的可定制多种样式的输入框
example:
<v-input type="" status="" size="" value="" label="" maxlength="" placeholder="" btn="" icon="" enterSubmit focused disabled loading inline circle number @click="" @blur="" @focus="" @input="" @enter="" @submit=""></v-input>
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | input类型,可选值为text /password /number /tel /search |
string | text |
btnType | input附带的button类型,可选值为normal /default /primary /success /warning /error /custom |
string | default |
btn | 是否有附带button,btn显示的文字 | string | - |
status | input状态,可选值为success /warning /error |
string | - |
size | input大小,可选值为xl /lg /md /sm /xs |
string | md |
value | input的value | string | - |
icon | input的icon | string | - |
label | input的label | string | - |
maxlength | input的最大长度 | string,number | - |
inline | label是否在行内 | boolean | false |
placeholder | input的placeholder | string | - |
circle | 是否全圆角 | boolean | false |
focused | 是否获取焦点 | boolean | false |
disabled | 是否不可用 | boolean | false |
number | 是否校验输入是number | boolean | false |
enterSubmit | 是否enter事件触发提交 | boolean | false |
onclick | 点击事件 | function | - |
onblur | 失焦事件 | function | - |
onfocus | 获得焦点事件 | function | - |
nav
生成可定制的导航
example:
<v-nav title="" backTxt="" closeTxt="" optionTxt="" @backCb="" @closeCb="" optionCb="" canClose canBack border>
<div slot="right"></div> // 定制右侧内容
</v-nav>
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 导航标题 | string | - |
backTxt | 导航返回的文字 | string | - |
closeTxt | 导航关闭的文字 | string | 关闭 |
optionTxt | 导航右侧的文字 | string | - |
backCb | 点击返回的回调 | function | - |
closeCb | 点击关闭的回调 | function | - |
optionCb | 点击右侧的回调,如自定义则需自行绑定事件 | function | - |
canBack | 是否可以返回 | boolean | false |
canClose | 是否可以关闭 | boolean | false |
border | 是否有底部边框 | boolean | false |
tabs
生成tab标签页
example:
<v-tabs v-model="" @tabsClick="" @tabsChange="">
<v-tabs-pane label="" name="">
<div></div>
</v-tabs-pane>
</v-tabs>
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
tabsClick | 点击tab的标题回调 | function | - |
tabsChange | tab切换之后的回调 | function | - |
tabs-pane
生成tab标签页的选项卡
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | 选项卡的标题 | string | - |
name | 选项卡的名字,用作标识选项卡,如未指定,则会使用选项卡的index 来标识 |
string | - |
item-group
生成一个item的列表
example:
<v-item-group title="" align="left||right" type="radio||checkbox" v-model="" @itemChange="">
<v-icon icon="success" size="sm" slot="title"></v-icon> // title旁的内容插槽
<v-item value="1" label="" caption="">
<v-icon icon="success" class="icon" slot="left"></v-icon> // item 主题内容的旁的内容插槽 有left/content/right3个类型 分别对应主体内容的3个位置
</v-item>
</v-item-group>
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | group的标题 | string | - |
type | group的形式,默认无,可为radio/checkbox模式,通过v-model获取返回值,数据为item设置的value值,checkbox返回值为array | string | - |
align | 配合type使用,可设置type的位置left/right | string | - |
itemChange | value变化时触发 | functon | - |
item
生成一个item
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | item的标题 | string | - |
caption | item的补充信息 | string | - |
value | item的值 | string | - |
agree-item
生成一个agree的item
example:
<v-agree-item v-model="" @itemChange="">xxx<a href="https://www.xxx.com/">xxx</a></v-agree-item>
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
itemChange | value变化时触发 | functon | - |
steps
生成一个步骤的列表
example:
<v-steps :current="" direction="horizontal||vertical(default)" type="icon||number(default)">
<v-step label="1" caption="step1"></v-step>
<v-step label="2" caption="step2"></v-step>
<v-step status="error" label="3" caption="step3"></v-step>
<v-step label="4" caption="step4"></v-step>
</v-steps>
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
current | 当前的步骤,从1开始计数 | number | 1 |
direction | 排列模式,horizontal 横向/vertical(default)竖向 | string | - |
type | 图标的模式 icon 图标/number(default)) 数字 | string | - |
step
生成一个步骤项
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | step的标题 | string | - |
caption | step的补充信息 | string | - |
status | step的状态,目前只有error ,配合父级type="icon"使用 |
string | - |
开发指引
组件文件结构
-组件名
-src
-模版文件/css/图片
-index.js // index.js作为统一出口
样式
公共样式在style
文件夹统一定义 组件样式一般写在模版文件.vue
中或在组件src
文件夹自行定义
目前采用sass
语法,单位使用px
css-loader
已添加px2rem
,在标准设计稿750px
宽度情况下,可直接按设计稿px
设置尺寸,px
会自动编译为rem
rem
方案为:设计稿基准宽度750px
/基准font-size
的单位为100
,即375px
手机的html
标签的font-size
为50px