## 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 |