Tabs-标签

注意

---

使用该组件时，需要引入 Tabs 、 TabsHead 、 TabsBody 、 TabsItem 、 TabsPane 五个组件并进行注册。 TabsHead 及 TabsBody 必须在 Tabs 组件的包裹之下， TabsItem 必须在 TabsHead 组件的包裹之下， TabsPane 必须在 TabsBody 组件的包裹之下。且需要给每个标题( TabsItem )及相对应的内容( TabsPane )相同的name。

预览

---

使用方法

---

<template>
  <div class="tabs-wrapper">
    <o-tabs :selected.sync="selectedTab">
      <o-tabs-head>
        <o-tabs-item name='tab1'>娱乐</o-tabs-item>
        <o-tabs-item name='tab2'>财经</o-tabs-item>
        <o-tabs-item name='tab3'>体育</o-tabs-item>
        <o-tabs-item name='tab4' disabled>
          <o-icon name="buy"></o-icon>购物
        </o-tabs-item>
      </o-tabs-head>
      <o-tabs-body>
        <o-tabs-pane name='tab1'>娱乐新闻</o-tabs-pane>
        <o-tabs-pane name='tab2'>财经咨询</o-tabs-pane>
        <o-tabs-pane name='tab3'>体育报道</o-tabs-pane>
        <o-tabs-pane name='tab4'>购物推荐</o-tabs-pane>
      </o-tabs-body>
    </o-tabs>
  </div>
</template>

选项

---

1. 设置默认选中状态

你可以在最外层的 Tabs 组件上设置 :selected.sync="selectedTab" 属性，其中"selectedTab"是你想默认选中的标题的name，你可以在data中进行设置。在这里我的设置为 selectedTab: 'tab1'。

2. 设置无法选中状态

你可以在 TabsItem 上设置 disabled 属性，这样该标题就无法被选中，其对应的 TabsPane 也不会显示。