基础类库

Actionsheet

Demo

Props

参数	说明	类型	默认值
cancel-text	取消按钮文字	String	cancel
menus	菜单列表, hash map, 格式见下	Object	{ }
show	显示绑定值, 双向绑定	Boolean	false
show-cancel	是否显示取消按钮	Boolean	false

menus 格式如下

Events

自定义事件名	参数	描述
on-menu-click	(menuKey, menuValue)	点击菜单时触发
on-cancel	- -	点击取消时触发

Badge

Demo

Props

参数	说明	类型	默认值
text	描述文字	String	无

Button-Tab

ButtonTab 与 ButtonTabItem 组件配合使用

Demo

Props

button-tab

参数	说明	类型	默认值
height	tab高度	Number	无

button-tab-item

参数	说明	类型	默认值
selected	是否选中	Boolean	false

Slots

名字	说明
默认slot	选项卡区域

Events

自定义事件名	参数	描述
on-item-click	- -	点击button-tab-item时触发

Card

Demo

Props

参数	说明	类型	默认值
header	hash map, 格式见下	Object	无
footer	hash map, 格式见下	Object	无

header 格式如下

footer 格式如下

Slots

名字	说明
header	卡片头部区域
content	卡片主题内容区域
footer	卡片底部区域

Flexbox

Flexbox 功能由 Flexbox 及 FlexboxItem 子组件组成, 需配合使用

Demo

Props

flexbox

参数	说明	类型	默认值
gutter	`FlexboxItem` 之间的间距, 单位px	Number	8
orient	`Flexbox` 容器的布局方向(vertical or horizontal)	String	horizontal

flexbox-item

参数	说明	类型	默认值
span	flexbox grid, 栅格布局中每列的比例	Number or String	无

Slots

名字	说明
默认slot	HTML内容区域

Panel

Demo

Props

参数	说明	类型	默认值
footer	`panel` 底部结构, hash map, 格式见下	Object	无
header	标题描述文本, Array, 格式见下	String	无
list	`panel` 内容列表	Array	无
type	`panel` 类型, 共三种 `withIcon`, `rawText`, `cellList`	String	withIcon

footer 格式如下

header 格式如下

Events

自定义事件名	参数	描述
on-click-header	- -	点击标题时触发
on-click-footer	- -	点击页脚时触发
on-click-item	(item)	点击 `panel` 中每项内容区域时触发

Picker

Demo

Props

参数	说明	类型	默认值
columns	设置滚动列数，注意仅在需要多级联动时设置，默认不联动	Number	0
data	数据源，可以是多维数组或对象数组，格式如下	Array	无
item-class	`Picker`中每列所包含的每个选项的`CSS`类选择器名字	String	scroller-item
value	`Picker`当前值，双向绑定	Array	无

data 格式如下

多维数组的情况, 此时每一个数组成员代表一列的数据 ``` js

[ ['你', '我', '他'], ['you', 'I', 'him'], ['ni', 'wo', 'ta'], [1, 2, 3, 4, 5], [5, 4, 3, 2, 1], ]

> 对象数组的情况, 此时用于多级联动时的情况，`Picker`的列数由数据源包含的各级依赖关系决定，
> **注意此组件采用扁平化数据结构，使用时请将原始数据源（如：树形数据结构）转换为扁平化结构**，形式如下

``` js

[{
    name: '中国',
    value: 'china',
    parent: 0,
},{
    name: '云南',
    value: 'china001',
    parent: 'china',
},  {
    name: '昆明',
    value: 'kunming',
    parent: 'china001',
}, {
    name: '大理',
    value: 'dali',
    parent: 'china001',
}, {
    name: '广东',
    value: 'china002',
    parent: 'china',
}, {
    name: '广州',
    value: 'gz',
    parent: 'china002',
}, {
    name: '深圳',
    value: 'sz',
    parent: 'china002',
}]

Events

自定义事件名	参数	描述
on-change	value	值变化时触发

Demo

Props

参数	说明	类型	默认值
height	弹出层高度	String	auto
show	是否显示Popup，双向绑定	Boolean	false

如果希望弹出层铺满整个屏幕，则可设置 height=100%

Slots

名字	说明
默认slot	弹出层内容区域，可随意嵌入任意DOM元素或组件

Events

自定义事件名	参数	描述
on-first-show	- -	第一次出现时触发，用于需要在第一次进行异步数据获取或者必要的UI渲染（如`Popup`内有`Scroller`）
on-hide	- -	隐藏时触发

PopupPicker 依赖于 Picker 组件

Demo

Props

参数	说明	类型	默认值
columns	设置滚动列数，注意仅在需要多级联动时设置，默认不联动	Number	0
data	数据源，可以是多维数组或对象数组，格式如下	Array	[ ]
inline-desc	可选，cell的子标题	String	无
placeholder	可选，自定义展示内容，支持HTML	String	无
show-name	可选，是否显示 `value` 对应的中文文本	Boolean	false
title	cell的主标题	String	无
value	`Picker`当前值，双向绑定	Array	[ ]

data 格式如下

多维数组的情况, 此时每一个数组成员代表一列的数据 ``` js

[ ['你', '我', '他'], ['you', 'I', 'him'], ['ni', 'wo', 'ta'], [1, 2, 3, 4, 5], [5, 4, 3, 2, 1], ]

> 对象数组的情况, 此时用于多级联动时的情况，`Picker`的列数由数据源包含的各级依赖关系决定，
> **注意此组件采用扁平化数据结构，使用时请将原始数据源（如：树形数据结构）转换为扁平化结构**，形式如下

``` js

[{
    name: '中国',
    value: 'china',
    parent: 0,
},{
    name: '云南',
    value: 'china001',
    parent: 'china',
},  {
    name: '昆明',
    value: 'kunming',
    parent: 'china001',
}, {
    name: '大理',
    value: 'dali',
    parent: 'china001',
}, {
    name: '广东',
    value: 'china002',
    parent: 'china',
}, {
    name: '广州',
    value: 'gz',
    parent: 'china002',
}, {
    name: '深圳',
    value: 'sz',
    parent: 'china002',
}]

Progress

Progress 组件默认利用 MProgress 对进度条加以控制，具体API详见MProgress文档。注意，若想在父组件中调用MProgressAPI对进度条的生命周期加以控制，建议采用parent.$refs.progressInstance.progress方式引用

Demo

Props

参数	说明	类型	默认值
percent	进度条进度标识，双向绑定，采用百分比，注意，该属性用于自定义进度条控制器的场景，默认采用 `MProgress`	Number	0
template	进度条类型，共5中类型，其中4中默认类型，一种自定制类型，详见下文	Number	0

template 类型如下

类型	对应属性值（template）	描述
custom	0	自动嵌于`Progress`组件内部
Determinate	1	自动 append to `body`，即位于页面顶部位置
Buffer	2	自动嵌于`Progress`组件内部
Indeterminate	3	自动嵌于`Progress`组件内部
Query Indeterminate and Determinate	4	自动嵌于`Progress`组件内部

Search

Demo

Props

参数	说明	类型	默认值
auto-fixed	是否激活搜索输入框	Boolean	true
cancel-text	取消按钮文本	String	cancel
placeholder	提示文字	String	Search
results	搜索结果列表，对象数组	Array	[ ]
value	实时输入的搜索关键字，双向绑定	String	''

Events

自定义事件名	参数	描述
on-change	value	搜索关键字变化时触发
on-submit	value	调用后台异步接口提交时出发
result-click	(item)	点击某一具体搜索结果项时触发

Spinner

Demo

Props

参数	说明	类型	默认值
type	类型，可选值有 'android'，'ios'，'ios-small'，'bubbles'，'circles'，'crescent'，'dots'，'lines'，'ripple'，'spiral'	String	ios

Swiper

Swiper 提供了list快捷设置和 SwiperItem 子组件方便定义。利用 wechatui

Demo

Props

参数	说明	类型	默认值
threshold	滑动距离阀值，当按住屏幕滑动超过此距离，松开手时，自动滑，否则不滑动	Number	50
duration	滑屏动画时间，单位ms，数值越小，滑动越快	Number	300
list	列表数据	Array	无
dots-position	indicator位置	String	right
dots-class	indicator的附加样式类	String	无
auto	是否自动播放	Boolean	false
interval	轮播时间间隔，单位ms	Number	3000
direction	播放方向	String	horizontal
height	容器高度	String	auto
aspect-ratio	纵横比，设置则自动根据宽度计算高度	Number	无
index	指定显示item的	Number	0
loop	是否循环播放	Boolean	无
min-moving-distance	最小滑动距离	Number	0
show-desc-mask	是否显示描述遮罩	Boolean	true
show-dots	是否显示indicator	Boolean	true

Slots

名字	说明
默认slot	轮播区域

Tab

Tab 与 TabItem 组件配合使用

Demo

Props

tab| 参数 | 说明 | 类型 | 默认值 | |---------------|-----------------------------|---------|---------| | default-color | 可选，默认文字的颜色 | String | #999 | | active-color | 可选，高亮文字的颜色和线条颜色 | String | #ffac38 | | animate | 可选，是否使用动画 | Boolean | true | | line-width | 可选，边框大小 | Number | 3 |

tab-item| 参数 | 说明 | 类型 | 默认值 | |----------|---------|---------|--------| | selected | 是否高亮 | Boolean | false |

Slots

名字	说明
默认slot	选项卡区域

Events

自定义事件名	参数	描述
on-item-click	- -	点击tab-item时触发

XHeader

目前 Xheader 并不处理定位，请手动用class或者style设置。

Demo

Props

参数	说明	类型	默认值
leftOptions.showBack	是否显示返回箭头	Boolean	true
leftOptions.backText	返回文字，可以为空	String	Back
leftOptions.preventGoBack	是否阻止点击Back时的后退，默认会调用history.back()	Boolean	false
rightOptions.showMore	是否显示更多图标	Boolean	false

Events

自定义事件名	参数	描述
on-click-back	- -	点击后退按钮或者文字时触发, 并且只有 `leftOptions.preventGoBack` 设为 `true` 时才触发
on-click-more	- -	点击更多图标时触发

Slots

名字	说明
默认slot	标题文字
left	位于Back之后的内容
right	位于 `rightOptions.showMore` 之后的内容

Actionsheet#

Demo#

Props#

Events#

Badge#

Demo#

Props#

Button-Tab#

Demo#

Props#

Slots#

Events#

Card#

Demo#

Props#

Slots#

Flexbox#

Demo#

Props#

Slots#

Panel#

Demo#

Props#

Events#

Picker#

Demo#

Props#

Events#

Popup#

Demo#

Props#

Slots#

Events#

Popup-Picker#

Demo#

Props#

Progress#

Demo#

Props#

Search#

Demo#

Props#

Events#

Spinner#

Demo#

Props#

Swiper#

Demo#

Props#

Slots#

Tab#

Demo#

Props#

Slots#

Events#

XHeader#

Demo#

Props#

Events#

Slots#

Actionsheet

Demo

Props

Events

Badge

Demo

Props

Button-Tab

Demo

Props

Slots

Events

Card

Demo

Props

Slots

Flexbox

Demo

Props

Slots

Panel

Demo

Props

Events

Picker

Demo

Props

Events

Popup

Demo

Props

Slots

Events

Popup-Picker

Demo

Props

Progress

Demo

Props

Search

Demo

Props

Events

Spinner

Demo

Props

Swiper

Demo

Props

Slots

Tab

Demo

Props

Slots

Events

XHeader

Demo

Props

Events

Slots