Tabs 选项卡

选项卡组件,用于内容分类切换,配合 re-tab-panel 使用。支持均分/非均分宽度、可滚动模式。

选项卡组件,用于内容分类切换,配合 re-tab-panel 使用。支持均分/非均分宽度、可滚动模式。

演示

9:41

代码示例

<re-tabs :defaultValue="0" @change="onTabsChange" @click="onTabsClick">
  <re-tab-panel label="选项" :value="0" />
  <re-tab-panel label="选项" :value="1" />
  <re-tabs :defaultValue="0" @change="onTabsChange" @click="onTabsClick">
  <re-tab-panel label="选项" :value="0" />
  <re-tab-panel label="选项" :value="1" />
  <re-tab-panel label="上限六个文字" :value="2" />
  <re-tabs :defaultValue="0" @change="onTabsChange" @click="onTabsClick">
  <re-tab-panel label="选项" :value="0" />
  <re-tab-panel label="选项" :value="1" />
  <re-tab-panel label="选项" :value="2" />
  <re-tab-panel label="上限四字" :value="3" />
  <re-tabs :defaultValue="0" :spaceEvenly="false" :scrollable="true" @change="onTabsChange" @click="onTabsClick">
  <re-tab-panel v-for="(item, index) in 8" :key="index" label="选项" :value="index" />
  <re-tabs :defaultValue="0" @change="onTabsChange" @click="onTabsClick">
  <re-tab-panel label="选项一" :value="0">
  <re-tab-panel label="选项二" :value="1">
  <re-tab-panel label="选项三" :value="2">
  <re-tab-panel label="选项四" :value="3">
  <re-tabs :value="statusValue" @change="onStatusChange" @click="onTabsClick">
  <re-tab-panel :label="statusValue == 0 ? '选中' : '默认'" :value="0" />
  <re-tab-panel :label="statusValue == 1 ? '选中' : '默认'" :value="1" />
  <re-tab-panel label="禁用" :value="2" :disabled="true" />
  <re-tabs :defaultValue="0" :spaceEvenly="false">
  <re-tab-panel label="短" :value="0" />
  <re-tab-panel label="较长文字" :value="1" />
  <re-tab-panel label="更长文字标签" :value="2" />
  <re-tabs :defaultValue="0" :showBottomLine="false">
  <re-tab-panel label="无线一" :value="0" />
  <re-tab-panel label="无线二" :value="1" />
  <re-tabs :defaultValue="0" customStyle="background-color: #f3f3f3; border-radius: 8px;">
  <re-tab-panel label="样式一" :value="0" />
  <re-tab-panel label="样式二" :value="1" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-tabs />。

API

Tabs Props

名称类型默认值描述必传
closableboolean--N

Tabs Events

名称参数描述
changevalue: numberstring
clickvalue: numberstring
closevalue: numberstring
update:valuevalue: numberstring

Tabs Slots

名称描述
default默认插槽

TabPanel Props

名称类型默认值描述必传
valuenumber | string0面板的值N
labelstring""面板标题N
disabledbooleanfalse是否禁用N
customStylestring""自定义样式N

TabPanel Slots

名称描述
default默认插槽