选项卡 - Tabs

示例

默认样式

点击查看源码

<template>
  <div class="container">
    <Tab :active="user" :value.sync="user" @tab-change="onTabChange" height="3">
      <TabPanel label="this is a long tab" value="user"
        >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, ratione?
      </TabPanel>
      <TabPanel label="short tab" value="role"
        >Lorem ipsum dolor sit amet.</TabPanel
      >
      <TabPanel label="this is a huge long long tab " value="config"
        >Lorem ipsum dolor sit amet, consectetur adipisicing
      </TabPanel>
    </Tab>
  </div>
</template>

<script>
import {Tab TabPanel}from "@wanmaoor/giaoui"

export default {
  name: "tab-demo"
  data(){
    return {
      user: 'user'
    }
  },
  methods: {
    onTabChange(val){
      console.log(val);
    }
  }
}
</script>

<style scoped>
.container {
  max-width: 800px;
  height: 10vh;
  margin: 30px auto;
  border-radius: 4px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
  padding: 15px;
}
</style>

没有状态条

点击查看源码

<template>
  <div class="container">
    <Tab
      :active="user"
      :value.sync="user"
      @tab-change="onTabChange"
      height="3"
      no-bar
    >
      <TabPanel label="this is a long tab" value="user"
        >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, ratione?
      </TabPanel>
      <TabPanel label="short tab" value="role"
        >Lorem ipsum dolor sit amet.</TabPanel
      >
      <TabPanel label="this is a huge long long tab " value="config"
        >Lorem ipsum dolor sit amet, consectetur adipisicing
      </TabPanel>
    </Tab>
  </div>
</template>

<script>
import {Tab TabPanel}from "@wanmaoor/giaoui"

export default {
  name: "tab-demo-1"
  data(){
    return {
      user: 'user'
    }
  },
  methods: {
    onTabChange(val){
      console.log(val);
    }
  }
}
</script>

<style scoped>
.container {
  max-width: 800px;
  height: 10vh;
  margin: 30px auto;
  border-radius: 4px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
  padding: 15px;
}
</style>

不展示 Tab 内容

点击查看源码

<template>
  <div class="container">
    <Tab
      :active="user"
      :value.sync="user"
      @tab-change="onTabChange"
      :height="3"
      only-header
    >
      <TabPanel label="this is a long tab" value="user"
        >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, ratione?
      </TabPanel>
      <TabPanel label="short tab" value="role"
        >Lorem ipsum dolor sit amet.</TabPanel
      >
      <TabPanel label="this is a huge long long tab " value="config"
        >Lorem ipsum dolor sit amet, consectetur adipisicing
      </TabPanel>
    </Tab>
  </div>
</template>

<script>
import {Tab TabPanel}from "@wanmaoor/giaoui"

export default {
  name: "tab-demo-2",
  components: { Tab, TabPanel },
  data() {
    return {
      user: "user"
    };
  },
  methods: {
    onTabChange(val) {
      console.log(val);
    }
  }
};
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 30px auto;
  border-radius: 4px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
  padding: 15px;
}
</style>

API

Tab组件

参数	说明	接受类型
@tab-change	接受一个回调函数, 在 tab 切换时调用, 第一个参数为 tab 的索引值	function(e: string
active	选定默认激活的 tab	string
height	定义 Tab Header 的高度, 使用 line-height 属性定义	number
noBar or no-bar	不显示状态条
onlyHeader or only-header	不显示 Tab Content

TabPanel组件

index	tab 的名字, 和Tab组件的active属性对应
label	确定 tab header 所展示的文字