# SuTabs标签页
> 用于某个模块的标题展示，同时支持自定义备注、小标题等

## 导入使用
```code[javascript]
import SuTabs from "ss-universal-client-web/comp/widget/su-tabs";
```
:::demo 
```html
<template>
    <div>
        <su-tabs :activeName="activeName" @tab-click="handleClick" @change="handleChange">
            <el-tab-pane label="我的客户20/30" name="first">
                <su-tabs :activeName="activeName" @tab-click="handleClick" @change="handleChange" justActiveShow>
                    <el-tab-pane label="我的客户20/30" name="first">
                    </el-tab-pane>
                    <el-tab-pane label="首咨客户30" name="second">
                    </el-tab-pane>
                    <el-tab-pane label="新行为客户30" name="third">
                    </el-tab-pane>
                    <el-tab-pane label="重要客户20/30" name="fourth">
                    </el-tab-pane>
                    <el-tab-pane label="一般重要客户20/30" name="five">
                    </el-tab-pane>
                    <el-tab-pane label="一般客户/30" name="six">
                    </el-tab-pane>
                </su-tabs>
            </el-tab-pane>
            <el-tab-pane label="首咨客户30" name="second">
            </el-tab-pane>
            <el-tab-pane label="新行为客户30" name="third">
            </el-tab-pane>
            <el-tab-pane label="重要客户20/30" name="fourth">
            </el-tab-pane>
            <el-tab-pane label="一般重要客户20/30" name="five">
            </el-tab-pane>
            <el-tab-pane label="一般客户/30" name="six">
            </el-tab-pane>
        </su-tabs>
    </div>
</template>
<script>
// import SuTabs from "ss-universal-client-web/comp/widget/su-tabs";
export default {
    data() {
       return {
           activeName : "first" 
       }
   },
    components:{
        SuTabs
    },
    methods: {
        handleClick(event) {
            console.log(event);
            this.activeName = event.tab.name;
            this.$message('点击了' + event.tab.label)
        },
        handleChange(e) {
            console.log(e);
        }
    }
};
</script>
```
:::
### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| value       | 选中的tab |String  | -	 | -|
| activeName         | 当前激活的tab	 |String | - | - |
| justActiveShow     | 仅显示激活的tab	 |Boolean | - | false |


### Events
| 事件名称      | 说明          | 回调参数      |
|---------- |-------------- |---------- |
| tab-click       | 点击tab时触发	 |被选中的tab实例  |
| change         | tab改变时触发	 |切换后tab的name |