Tabs 标签页

MoTabs 用于同级内容切换。items 决定标签列表，v-model 保存当前选中项的 value；如果没有传入或找不到匹配值，默认选中第一项。

基础用法

Light

当前面板：基础信息

Dark

当前面板：基础信息

<script setup lang="ts">
import { ref } from "vue";

const active = ref("basic");
const items = [
  { label: "基础信息", value: "basic" },
  { label: "运行配置", value: "runtime" },
  { label: "发布记录", value: "release" }
];
</script>

<template>
  <MoTabs v-model="active" :items="items">
    <template #panel="{ item }">
      当前面板：{{ item.label }}
    </template>
  </MoTabs>
</template>

尺寸

Light

Dark

<MoTabs v-model="active" size="small" :items="items" />
<MoTabs v-model="active" :items="items" />
<MoTabs v-model="active" size="large" :items="items" />

禁用项

Light

概览 内容

Dark

概览 内容

const items = [
  { label: "概览", value: "overview" },
  { label: "设置", value: "settings", disabled: true },
  { label: "日志", value: "logs" }
];

自定义 Label 与 Panel

Light

待处理：共 8 条记录。

Dark

待处理：共 8 条记录。

<MoTabs v-model="active" :items="items">
  <template #label="{ item, selected }">
    <span :class="{ active: selected }">
      {{ item.label }}
      <span>{{ item.count }}</span>
    </span>
  </template>

  <template #panel="{ item }">
    {{ item.label }}：共 {{ item.count }} 条记录。
  </template>
</MoTabs>

自定义颜色

Light

Dark

<MoTabs
  v-model="active"
  :items="items"
  background-color="#eef2ff"
  active-background-color="linear-gradient(90deg, #2563eb, #0d9488)"
/>

Change 事件

Light

等待切换

Dark

等待切换

<MoTabs v-model="active" :items="items" @change="handleChange" />

function handleChange(value, item, index) {
  console.log(value, item, index);
}

API

属性	说明	类型	默认值
v-model	当前选中值	string | number	-
items	标签项	TabsItem[]	必填
size	尺寸	small | default | large	default
theme	主题	light | dark	light
backgroundColor	自定义标签栏背景	string	-
activeBackgroundColor	自定义激活指示器背景	string	-

TabsItem

字段	说明	类型
label	标签文本	string
value	标签值	string | number
disabled	是否禁用	boolean

Events

事件	说明	参数
change	当前选中项变化时触发	value, item, index

Slots

插槽	说明
label	自定义标签内容，参数 { item, index, selected }
panel	自定义面板内容，参数 { item, index }