基础类库
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
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | tab高度 | Number | 无 |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| gutter | FlexboxItem 之间的间距, 单位px | Number | 8 |
| orient | Flexbox 容器的布局方向(vertical or horizontal) | String | horizontal |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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
> 对象数组的情况, 此时用于多级联动时的情况，`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 | 值变化时触发 |
Popup
Demo
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 弹出层高度 | String | auto |
| show | 是否显示Popup，双向绑定 | Boolean | false |
如果希望弹出层铺满整个屏幕，则可设置 height=100%
Slots
| 名字 | 说明 |
|---|---|
| 默认slot | 弹出层内容区域，可随意嵌入任意DOM元素或组件 |
Events
| 自定义事件名 | 参数 | 描述 |
|---|---|---|
| on-first-show | - - | 第一次出现时触发，用于需要在第一次进行异步数据获取或者必要的UI渲染（如Popup内有Scroller） |
| on-hide | - - | 隐藏时触发 |
Popup-Picker
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
> 对象数组的情况, 此时用于多级联动时的情况，`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
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 之后的内容 |
扫码加入交流群修改于 2022-03-07 06:06:43