Meri Plus页签 Tabs
line 状态, renderSlot
segment 状态
border 状态
前置标签
API
Attributes
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| model-value / v-model | String | - | - | 选中的对象 ID |
| data | [ ] | - | [ ] | 选项集合 详细解释如下 |
| type | string | line - segment - border | line | 类型 |
| backgroundColor | string | CSS ColorValue | '' | 背景颜色 |
| size | string | large - medium - small | medium | tabs 大小，line 模式下只有large - medium可选 |
| scrollPosition | string | start - end | start | Tab 较多的时候，选中滑块滚动最终停留的位置 |
| item-width | string | - | - | 每一个 tabs-item 的 width 设置 |
| renderSlot | object | {component:component,html:string,style:object} | - | item 中的插槽渲染 |
| renderPreSlot | object | {component:component,html:string,style:object,iconName: string,iconSize: number,iconColor: string} | - | item 中的前置插槽渲染 |
Events
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| change | function(item: object, event: Event) | - | - | 点击回调事件 |
Tabs 方法
| 名称 | 类型 | 说明 |
|---|---|---|
| setBarStyle | - | 计算 tab 宽度 |
// 单个对象
export type Item = {
id: string;
name: string;
class: string; // 单个的tab的class
disabled: boolean; // 是否禁用
slotName: string; // 插槽渲染
renderSlot?: { // 渲染插槽
component: h(MLogo, {count: 10}), // 组件 注意 component和html同时存在时，优先使用component
html: `<div>(<span style="color: red">23</span>/100)</div>`, // html
style: { // renderSlot div容器样式
color: 'red'
}
};
}