中文站 English
备案 控制台 登录 立即咨询
API文档
首页> API文档 > UI组件
基础类库
更新时间： 2024-11-21 19:50:59

基础类库

Actionsheet

Demo

Props

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

menus 格式如下

{
  menu1: 'Take Photo',
  menu2: 'Choose from photos'
}

Events

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

Badge

Demo

Props

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

Button-Tab

ButtonTab 与 ButtonTabItem 组件配合使用

Demo

Props

button-tab

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

button-tab-item

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

Slots

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

Events

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

Card

Demo

Props

参数说明类型默认值
headerhash map, 格式见下Object无
footerhash map, 格式见下Object无

header 格式如下

{
  title: 'Naruto',
}

footer 格式如下

{
  title: 'Boruto',
  link: 'some/path',
}

Slots

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

Flexbox

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

Demo

Props

flexbox

参数说明类型默认值
gutterFlexboxItem 之间的间距, 单位pxNumber8
orientFlexbox 容器的布局方向(vertical or horizontal)Stringhorizontal

flexbox-item

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

Slots

名字说明
默认slotHTML内容区域

Panel

Demo

Props

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

footer 格式如下

{
    title: '查看更多',
    url: 'path/to/some/where',
}

header 格式如下

[{
    src: 'path/to/some/image',
    title: '标题一',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell',
}, {
    src: 'path/to/some/image',
    title: '标题二',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: {
        path: '/component/radio',
        replace: false,
    },
}]

Events

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

Picker

Demo

Props

参数说明类型默认值
columns设置滚动列数，注意仅在需要多级联动时设置，默认不联动Number0
data数据源，可以是多维数组或对象数组，格式如下Array无
item-classPicker中每列所包含的每个选项的CSS类选择器名字Stringscroller-item
valuePicker当前值，双向绑定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-changevalue值变化时触发

Popup

Demo

Props

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

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

Slots

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

Events

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

Popup-Picker

PopupPicker 依赖于 Picker 组件

Demo

Props

参数说明类型默认值
columns设置滚动列数，注意仅在需要多级联动时设置，默认不联动Number0
data数据源，可以是多维数组或对象数组，格式如下Array[ ]
inline-desc可选，cell的子标题String无
placeholder可选，自定义展示内容，支持HTMLString无
show-name可选，是否显示 value 对应的中文文本Booleanfalse
titlecell的主标题String无
valuePicker当前值，双向绑定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进度条进度标识，双向绑定，采用百分比，注意，该属性用于自定义进度条控制器的场景，默认采用 MProgressNumber0
template进度条类型，共5中类型，其中4中默认类型，一种自定制类型，详见下文Number0

template 类型如下

类型对应属性值（template）描述
custom0自动嵌于Progress组件内部
Determinate1自动 append to body，即位于页面顶部位置
Buffer2自动嵌于Progress组件内部
Indeterminate3自动嵌于Progress组件内部
Query Indeterminate and Determinate4自动嵌于Progress组件内部

Search

Demo

Props

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

Events

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

Spinner

Demo

Props

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

Swiper

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

Demo

Props

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

Slots

名字说明
默认slot轮播区域

Tab

Tab 与 TabItem 组件配合使用

Demo