<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">Segment</div>
    </div>
    <h3>基本示例</h3>
    <h4>默认</h4>
    <Segment class="segment" :values="segments"></Segment>
    <h4>禁用状态</h4>
    <Segment class="segment" :values="segments" disabled></Segment>
    <h4>默认选中</h4>
    <Segment class="segment" :values="segments2" :selectedIndex="2"></Segment>
    <h4>事件监听</h4>
    <Segment class="segment" :values="segments2" @onChange="changeValue"></Segment>
    <h4>自定义样式</h4>
    <Segment class="segment" :values="segments2" tintColor="#03c03c" style="height: 40px; width: 80%"></Segment>
  </div>
</template>
<script>
export default {
  data () {
    return {
      segments: ['表1', '表2'],
      segments2: ['表1', '表2', '表3']
    }
  },
  methods: {
    changeValue (index, val) {
      console.log(index, val)
    }
  }
}
</script>
<style scoped>
.segment {
  padding: 0 16px;
}
</style>