vue 移动端组织架构

移动端UI框架mux-ui

• 移动端UI框架mux-ui
• 安装
• 组件

• Actionsheet组件
• 按钮Button组件
• 头像Avatar组件
• Cell组件
• Card组件
• Alert组件
• Confirm组件
• Prompt组件
• Field组件
• RadioGroup组件
• Radio组件
• Checkbox组件
• Switch组件
• Header组件
• Sticky组件
• Tab组件
• TabItem组件
• Fold组件
• Tree组件

移动端UI框架mux-ui

从2014年起，在前端摸爬滚打至今，做了不少项目。期间使用过不少的前端框架，其中Vue框架做过的项目最多。用Vue开发了许多的组件，空闲时间整理出来。成了现在的mux-ui。

安装

npm install @niyang-es/mux-ui --save

组件

mux-ui主要有:

• Actionsheet组件；
• 按钮Button组件；
• 头像Avatar组件；
• Cell组件；
• Card组件；
• 弹窗组件，包括Alert、Confirm、Prompt；
• 表单组件，包括Field、Radio、Checkbox，Switch；
• 头部Header组件。
• 粘性Sticky组件;
• 切换卡Tab组件，包括TabItem、TabSlider组件；
• 折叠Fold组件；
• 树Tree组件；
  其他组件正在开发中。

Actionsheet组件

属性	类型	默认值	描述	备注
items	string[]/object[]	[]	组件展示的数据项	items为对象数组时，每一项必须含name，即：{name:string,[prop:value]}
value	boolean	false	控制组件是否显示
cancel	boolean/object	false	控制是否显示取消按钮或者自定义取消按钮	自定义取消按钮{text:string}
zIndex	number	2020	阴影层的层级
closeOnMaskClick	boolean	true	点击阴影层是否隐藏组件

按钮Button组件

属性	类型	默认值	描述	备注
block	boolean	false	表现块元素
disabled	boolean	false	按钮disabled状态
plain	boolean	空心按钮
size	string	按钮尺寸,定义了small/normal/large三种尺寸
color	string	按钮颜色,定义了default/primary/danger/error四种颜色

头像Avatar组件

属性	类型	默认值	描述	备注
src	string	‘’	头像地址	需要完整的url地址
alt	string	avatar	图片的占位符
size	string/number	30	头像尺寸
flat	boolean	false	扁平化
fit	string	all	图片适配宽高

Cell组件

属性	类型	默认值	描述	备注
arrow	boolean	false	是否有箭头
direction	string	row	定义cell的方向,row行/column列
align	string	start	弹性布局的item-align的属性
justify	string	start	弹性布局content-justify的属性

Card组件

属性	类型	默认值	描述	备注
header	string	卡片头部
content	string	卡片内容
footer	string	卡片底部

Alert组件

属性	类型	默认值	描述	备注
title	string	提示
value	boolean	false
zIndex	number	2020
transition	string	mux-bounce
message	string	‘’
btnText	string	确定

Confirm组件

属性	类型	默认值	描述	备注
title	string	提示
value	boolean	false
zIndex	number	2020
transition	string	mux-bounce
message	string	‘’
cancelBtnText	string	取消
confirmBtnText	string	确定

Prompt组件

属性	类型	默认值	描述	备注
title	string	提示
type	string	text	input的type属性
rules	array	[]	数组项function(v){return boolean
value	boolean	false
zIndex	number	2020
transition	string	mux-bounce
cancelBtnText	string	取消
confirmBtnText	string	确定

Field组件

属性	类型	默认值	描述	备注
type	string	text	input类型，含H5输入类型email, number, password, search, tel, text, url
id	string	‘’
attrs	object
required	boolean	false
label	string	‘’
disabled	boolean	false
name	string	XFeild
value	string	‘’
placeholder	string	请输入
clearable	boolean	true
readonly	boolean	false
labelClass	string/array	[]
align	string	left	文字对齐方式left, center, right
plain	boolean	false
rounded	boolean	false
invalid	boolean	false
message	string	‘’

RadioGroup组件

属性	类型	默认值	描述	备注
block	boolean	false
value	string
reverse	boolean	false	反向

Radio组件

属性	类型	默认值	描述	备注
label	string	‘’
id	string	‘’
name	string	‘XRadio’
checked	boolean	false
disabled	boolean	false
value	string
radioValue	string	‘’

Checkbox组件

属性	类型	默认值	描述	备注
value	array	[]
name	string
id	string	‘’
checked	boolean	false
disabled	boolean	false
partial	boolean	false
label	string	‘’
checkboxValue	string	‘’

Switch组件

属性	类型	默认值	描述	备注
onValue	string/boolean/number	true
offValue	string/boolean/number	false
disabled	boolean	false
readonly	boolean	false
value	string/boolean/number	true

Header组件

属性	类型	默认值	描述	备注
fixed	boolean	false
back	object/boolean]	true
title	string	‘’
more	boolean/bject	false

Sticky组件

属性	类型	默认值	描述	备注
top	number/string	0
left	number/string	auto
right	number/string	auto
bottom	number/string	auto

Tab组件

属性	类型	默认值	描述	备注
hideSlider	boolean	false
sliderSize	number	70
site	string	bottom	silder的位置top, bottom
fillCell	boolean	false
maxCell	number	6

TabItem组件

属性	类型	默认值	描述	备注
actived	boolean	false

Fold组件

属性	类型	默认值	描述	备注
title	string	‘’
value	boolean	false

Tree组件

属性	类型	默认值	描述	备注
value	array	[]
items	array	[]
itemText	string	name
itemValue	string	id
itemChildren	string	children
checked	boolean	false
lazy	boolean	false
loadChildren	function	(id) => { }
useCheckbox	boolean	false
open	boolean	false