Tabs 选项卡

常用的选项卡。

基础用法

无额外配置直接使用即可。

标准

page1

page2

page3

page4

page1

page2

page3

page4

组合使用

page1

page2

page3

page4

page2

page3

page4

纵向

page1

page2

page3

page4

纵向卡片

page1

page2

page3

page4

<template>
  <div class="vp_title_label">标准</div>
  <m-tabs v-model="activeName">
    <m-tab-item label="第一页" name="page1"> page1 </m-tab-item>
    <m-tab-item label="第二页" name="page2"> page2 </m-tab-item>
    <m-tab-item label="第三页" name="page3"> page3 </m-tab-item>
    <m-tab-item label="第四页" name="page4"> page4 </m-tab-item>
  </m-tabs>

  <m-tabs v-model="activeName" card>
    <m-tab-item label="第一页" name="page1"> page1 </m-tab-item>
    <m-tab-item label="第二页" name="page2"> page2 </m-tab-item>
    <m-tab-item label="第三页" name="page3"> page3 </m-tab-item>
    <m-tab-item label="第四页" name="page4"> page4 </m-tab-item>
  </m-tabs>

  <div class="vp_title_label">组合使用</div>
  <m-tabs v-model="activeName2" card useHeaderLine>
    <m-tab-item label="第一页" name="page1">
      <m-tabs v-model="activeName5" portrait>
        <m-tab-item label="第一页" name="page1-1"> page1 </m-tab-item>
        <m-tab-item label="第二页" name="page2-1"> page2 </m-tab-item>
        <m-tab-item label="第三页" name="page3-1"> page3 </m-tab-item>
        <m-tab-item label="第四页" name="page4-1"> page4 </m-tab-item>
      </m-tabs></m-tab-item
    >
    <m-tab-item label="第二页" name="page2"> page2 </m-tab-item>
    <m-tab-item label="第三页" name="page3"> page3 </m-tab-item>
    <m-tab-item label="第四页" name="page4"> page4 </m-tab-item>
  </m-tabs>

  <div class="vp_title_label">纵向</div>

  <m-tabs v-model="activeName3" portrait>
    <m-tab-item label="第一页" name="page1"> page1 </m-tab-item>
    <m-tab-item label="第二页" name="page2"> page2 </m-tab-item>
    <m-tab-item label="第三页" name="page3"> page3 </m-tab-item>
    <m-tab-item label="第四页" name="page4"> page4 </m-tab-item>
  </m-tabs>

  <div class="vp_title_label">纵向卡片</div>

  <m-tabs v-model="activeName4" portrait card>
    <m-tab-item label="第一页" name="page1"> page1 </m-tab-item>
    <m-tab-item label="第二页" name="page2"> page2 </m-tab-item>
    <m-tab-item label="第三页" name="page3"> page3 </m-tab-item>
    <m-tab-item label="第四页" name="page4"> page4 </m-tab-item>
  </m-tabs>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const activeName = ref("page1");
const activeName2 = ref("page1");
const activeName3 = ref("page1");
const activeName4 = ref("page1");
const activeName5 = ref("page2-1");
</script>

<style scoped lang="scss">
.vp_title_label {
  margin-top: 20px;
  margin-bottom: 5px;
  &:first-child {
    margin-top: 0;
  }
}
</style>

显示代码

自定义标签

使用 插槽 对选项卡标签进行自定义内容修改。

  <m-tabs v-model="activeName">
    <m-tab-item label="第一页" name="page1">   
      <template #label>
        <m-icon name="applet_line" />
        <span>Page1</span>
      </template>
      page1
    </m-tab-item>
  </m-tabs>

是否现实第二页：

page1

page3

page4

<template>
  <div class="flex config-box">
    <div class="in_title_label">是否现实第二页：<el-switch v-model="switchValue" /></div>
  </div>

  <m-tabs v-model="activeName">
    <m-tab-item label="第一页" name="page1">
      <template #label>
        <m-icon name="applet_line" />
        <span>Page1</span>
      </template>
      page1
    </m-tab-item>
    <m-tab-item v-if="switchValue" label="第二页" name="page2"> page2 </m-tab-item>
    <m-tab-item label="第三页" name="page3"> page3 </m-tab-item>
    <m-tab-item label="第四页" name="page4"> page4 </m-tab-item>
  </m-tabs>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const activeName = ref("page1");
const switchValue = ref(false);
</script>

<style scoped lang="scss"></style>

显示代码

滚动模式（锚点）

当设置 slider 模式，可实现全展示与 锚点 功能

<m-tabs v-model="state.activeName" slider>
  <m-tab-item label="User" name="one"></m-tab-item> 
</m-tabs>

page1

page2

page3

page4

<template>
  <div class="max-box">
    <m-tabs v-model="activeName5" slider card>
      <m-tab-item label="第一页" name="page1-1"> <div class="box">page1</div> </m-tab-item>
      <m-tab-item label="第二页" name="page2-1"> <div class="box">page2</div> </m-tab-item>
      <m-tab-item label="第三页" name="page3-1" :tips="'tips'"> <div class="box">page3</div> </m-tab-item>
      <m-tab-item label="第四页" name="page4-1">
        <div class="box">page4</div>
        <template #tips>tips2</template>
      </m-tab-item>
    </m-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const activeName5 = ref("page3-1");
</script>

<style scoped lang="scss">
.vp_title_label {
  margin-top: 20px;
  margin-bottom: 5px;
  &:first-child {
    margin-top: 0;
  }
}
.max-box {
  height: 400px;
}
.box {
  width: 100%;
  height: 500px;
}
</style>

显示代码

内页是否可滚动

当设置 tabs 高度时，内部元素 m-tab-item 高度会被拦截，可添加 scroll 是否滚动属性

<m-tabs v-model="state.activeName">
  <m-tab-item label="User" name="one" scroll></m-tab-item>
</m-tabs>

scroll

no-scroll

<template>
  <div style="height: 400px">
    <m-tabs v-model="state.activeName" card>
      <m-tab-item label="User" name="one" scroll>
        <div style="height: 800px; width: 1200px">scroll</div>
      </m-tab-item>
      <m-tab-item label="User" name="two">
        <div style="height: 800px; width: 1200px">no-scroll</div>
      </m-tab-item>
    </m-tabs>
  </div>
</template>

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

const state = reactive({
  activeName: "one"
});
</script>

<style scoped lang="scss"></style>

显示代码

Api

Attribute 属性

属性名	说明	类型	可选值	默认值
activeName	默认选中 tab	string		—
mode	显示类型	string	'display' / 'visible'	'visible'
card	卡片模式	boolean		false
portrait	纵向模式	boolean		false
slider	滚动模式（锚点）	boolean		false
useHeaderLine	表头下划线	boolean		false

Events 事件

字段	类型	描述
tab-change	function	当 tab 切换时触发