Tabs

页面内容器切换组件。

基础标签

给<c-tabs>设置属性activeIndex的值，可指定当前展示容器，默认值为1。

activeIndex的值不要超出<c-tab-pane的个数，否则重置该值为1。

Tab1

Tab2

Tab3

惜诵以致愍兮，发愤以抒情。
所作忠而言之兮，指苍天以为正。

Tab1

Tab2

Tab3

屈原既放，三年不得复见。
竭知尽忠而蔽障于谗。
心烦虑乱，不知所从。

<c-tabs>
  <c-tab-pane label="Tab1">
    惜诵以致愍兮，发愤以抒情。<br>
    所作忠而言之兮，指苍天以为正。
  </c-tab-pane>
  <c-tab-pane label="Tab2">
    屈原既放，三年不得复见。<br>
    竭知尽忠而蔽障于谗。<br>
    心烦虑乱，不知所从。
  </c-tab-pane>
  <c-tab-pane label="Tab3">
    桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。<br>
    山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。
  </c-tab-pane>
</c-tabs>
<br><br>
<c-tabs activeIndex="2">
  <c-tab-pane label="Tab1">
    惜诵以致愍兮，发愤以抒情。<br>
    所作忠而言之兮，指苍天以为正。
  </c-tab-pane>
  <c-tab-pane label="Tab2">
    屈原既放，三年不得复见。<br>
    竭知尽忠而蔽障于谗。<br>
    心烦虑乱，不知所从。
  </c-tab-pane>
  <c-tab-pane label="Tab3">
    桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。<br>
    山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。
  </c-tab-pane>
</c-tabs>

自定义标签

通过添加slot="label"给标签添加自定义内容。

video

sun

slack

It's not what happens to you, but how you react to it that matters.

<c-tabs>
  <c-tab-pane>
    <span slot="label">
      <c-icon name="video" size="1em" valign="middle"></c-icon>
      video
    </span>
    It's not what happens to you, but how you react to it that matters.
  </c-tab-pane>
  <c-tab-pane>
    <span slot="label">
      <c-icon name="sun" size="1em" valign="middle"></c-icon>
      sun
    </span>
    Be the type of person you want to meet.
  </c-tab-pane>
  <c-tab-pane>
    <span slot="label">
      <c-icon name="slack" size="1em" valign="middle"></c-icon>
      slack
    </span>
    Imagination is more important than knowledge. <br>
    Knowledge is limited. <br>
    Imagination encircles the world.
  </c-tab-pane>
</c-tabs>

使标签不可用

通过给<c-tab-pane>设置disabled，使当前标签页呈现不可点击状态。

video

sun

slack

Imagination is more important than knowledge.
Knowledge is limited.
Imagination encircles the world.

<c-tabs activeIndex="3">
  <c-tab-pane label="video">
    It's not what happens to you, but how you react to it that matters.
  </c-tab-pane>
  <c-tab-pane label="sun" disabled>
    Be the type of person you want to meet.
  </c-tab-pane>
  <c-tab-pane label="slack">
    Imagination is more important than knowledge. <br>
    Knowledge is limited. <br>
    Imagination encircles the world.
  </c-tab-pane>
</c-tabs>

标签位置

通过给<c-tabs>设置position值，更换标签位置。

topbottomleftright

Tab1

Tab2

Tab3

桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。
山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。

<div style="margin-bottom: 2em;">
  <c-radio-group
    :options="options"
    v-model="position"
    button
  />
</div>

<c-tabs :position="position" activeIndex="3">
  <c-tab-pane label="Tab1">
    惜诵以致愍兮，发愤以抒情。<br>
    所作忠而言之兮，指苍天以为正。
  </c-tab-pane>
  <c-tab-pane label="Tab2">
    屈原既放，三年不得复见。<br>
    竭知尽忠而蔽障于谗。<br>
    心烦虑乱，不知所从。
  </c-tab-pane>
  <c-tab-pane label="Tab3">
    桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。<br>
    山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。
  </c-tab-pane>
</c-tabs>

<script>
export default {
  data(){
    return {
      position: 'top',
      options: [
        { label: 'top', value: 'top' },
        { label: 'bottom', value: 'bottom' },
        { label: 'left', value: 'left' },
        { label: 'right', value: 'right' }
      ]
    }
  }
}
</script>

事件捕捉

@change可捕捉触发切换标签事件。

video

sun

slack

Be the type of person you want to meet.

<c-tabs activeIndex="2" @change="onClick">
  <c-tab-pane label="video" disabled>
    It's not what happens to you, but how you react to it that matters.
  </c-tab-pane>
  <c-tab-pane label="sun">
    Be the type of person you want to meet.
  </c-tab-pane>
  <c-tab-pane label="slack">
    Imagination is more important than knowledge. <br>
    Knowledge is limited. <br>
    Imagination encircles the world.
  </c-tab-pane>
</c-tabs>

<script>
export default {
  methods: {
    onClick (value) {
      alert(`第${value}个标签，有幸被点...`)
    }
  }
}
</script>

选项卡形式标签

在<c-tabs>上设置mode="card"，更换为选项卡模式（不支持位置变换）。

九章

卜居

招隐士

惜诵以致愍兮，发愤以抒情。
所作忠而言之兮，指苍天以为正。

<c-tabs mode="card">
  <c-tab-pane label="九章">
    惜诵以致愍兮，发愤以抒情。<br>
    所作忠而言之兮，指苍天以为正。
  </c-tab-pane>
  <c-tab-pane label="卜居">
    屈原既放，三年不得复见。<br>
    竭知尽忠而蔽障于谗。<br>
    心烦虑乱，不知所从。
  </c-tab-pane>
  <c-tab-pane label="招隐士">
    桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。<br>
    山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。
  </c-tab-pane>
</c-tabs>

c-tabs属性说明

属性	类型	默认值	说明	可选值
activeIndex	String	1	当前展示项索引	1,2,3...
position	String	top	标签位置	top / bottom / left / right
mode	String	-	标签形式	- / 'card'

c-tabs事件说明

事件	类型	说明	回调参数
change	Function(activeKey) {}	切换tab时的回调	被选中标签的index值

c-tab-pane属性说明

属性	类型	默认值	说明	可选值
label	String	-	标签页标题	-
disabled	Boolean	false	禁用某一项	false / true