## tsSegmentedControl 分段器 用作不同视图的显示，组件为水平方向显示，组件名：`ts-segmented-control`。 **使用方式：** 在`script`中引用组件 ~~~ import tsSegmentedControl from 'components/teaset/components/ts-segmented-control/ts-segmented-control.vue'; export default { components: {tsSegmentedControl}, data() { return { tabs: ['企业招聘', '高校人才', '学生求职'], currentTab: 0, } }, methods: { onClickItem(index) { if (this.currentTab !== index) { this.currentTab = index; //记录当前的Tab this.doSearch(); //执行加载数据任务 } } } } ~~~ SegmentedControl 在`template`中的使用 > 自定义组件在编译成为微信小程序组件的时候需要明确自定义控件的外观`class="ts-flex-row ts-flex-item" ` > 自定义组件的事件通知模型是通过current告知组件内部当初始化选中的Tab，内部通过clickItem(index)事件通知父组件内部状态的改变 ``` <ts-segmented-control class="ts-flex-row ts-flex-item" :values="tabs" :current="currentTab" style-type="button" @clickItem="onClickItem"></ts-segmented-control> ``` ~~~ <!-- 企业用人需求 --> <view v-if="currentTab==0" class="ts-column"> </view> <!-- 高校人才供应 --> <view v-if="currentTab==1" class="ts-column"> </view> <!-- 学生求职 --> <view v-if="currentTab==2" class="ts-column"> </view> ~~~ **SegmentedControl 属性说明：** | 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | current | Number | 0 | 当前选中的tab索引值，从0计数 | | values | Array | \- | 选项数组 | | style-type | String | button | 分段器样式类型，可选值：button（按钮类型），text（文字类型） | | active-color | String | #007aff | 选中的标签背景色与边框颜色 | | @clickItem | EventHandle | \- | 组件触发点击事件时触发，参数为当前选中的tab索引值 current |