Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

基础用法

First1

First

Second2

Second

Tabs 组件，默认选中第一个标签页。

<template>
  <j-tab-panel
          class="larger"
          style="border:0px solid #eee;height:200px;width:600px;"
        >
    <j-tab text="First1">First</j-tab>
    <j-tab icon="icon-map" text="Second2">Second</j-tab>
  </j-tab-panel>
</template>

显示代码 复制代码 复制代码

高级用法

First1 changed

First changed

Second2

0

tab3

通过 active-tab-index 属性来指定当前选中的标签页，通过position设置页签的展示位置。

<template>
  <j-tab-panel
        position="left"
        class="larger"
        :active-tab-index="activeIndex"
        style="border:0px solid #eee;height:200px;width:400px;margin:2px;"
        @tab-change="tabChange"
      >
    <j-tab text="First1 changed" icon="icon-map">First changed</j-tab>
    <j-tab text="Second2">{{activeIndex}}</j-tab>
    <j-tab text="tab3" disabled>
      <iframe
        style="width:100%;height:100%;"
        src="https://cn.vuejs.org/v2/guide/components-slots.html"
      ></iframe>
    </j-tab>
  </j-tab-panel>
</template>
<script>
  export default {
    data() {
      return {
        activeIndex: 0
      };
    },
    methods: {
      tabChange(index,event) {
        this.activeIndex = index;
        console.log(event);
      },
    }
  };
</script>

显示代码 复制代码 复制代码

tab-panel Attributes

参数	说明	类型	可选值	默认值
class	尺寸	string	larger	—
active-tab-index	选中的下标	number	—	—
position	选项卡所在位置	string	top/left	—

tab-panel Events

事件名称	说明	回调参数
tab-change	tab 切换时触发	选中的下标，被选中的标签 tab 实例

tab Attributes

参数	说明	类型	可选值	默认值
text	选项卡标题	string	—	—
disabled	是否禁用	boolean	—	false
icon	图标类名	string	—	—

tab Events

事件名称	说明	回调参数
active	tab 选中时触发	被选中的标签 tab 实例