引入组件库

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