Vesper-ui NPM | npm.io

引入组件库

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

@infinitebrahmanuniverse/nolb-ves @everything-registry/sub-chunk-3051

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago