Segment

小标签 / Segment

Segment组件可以说是联动的按钮组合, 他不负责路由, 只是按钮组合而已. 如果涉及路由, 请使用Tab组件, 或者自己集成路由部分.

父子组件组合

Segment组件和SegmentButton组件是互相组合的模式, 不可分离. 父组件可使用v-model指令监听子组件当前的选中状态. 子组件支持异步载入, 当子组件的value没有指定, 则使用当前组件的内置文本作为其value.

父子组件通信过程

  1. 初始化时, 子组件自己的this传递给父组件, recordChild()
  2. 子组件点击时, 调用父组件的 $_refreshChildState 函数, 传递自己的value
  3. 父组件得到value触发onChange更新v-modal值, 之后遍历子组件, 触发组件的setChecked, 传递value
  4. 子组件根据传入的value设置自己的状态

异步加载子组件

父组件通过被动的的方式获取对子组件的控制权, 便于异步动态初始化子组件的情形. 子组件的value是子组件的标示, 当value没有值时, 通过SegmentButton组件中的text内容获取唯一标示.

支持v-model指令

如果不使用v-model指令, 通过value属性可设置初始选中状态, 但是使用了v-model指令时, 动态改变value将不会触发onChange事件, 因为事件的触发原则是组件内部变动通知外部, 但是外部改变value不是内部行为, 这点切记.

如何使用

// 引入
import { Segment, SegmentButton } from 'vimo'
// 安装
Vue.component(Segment.name, Segment)
Vue.component(SegmentButton.name, SegmentButton)
源码:

传入属性 / Props:

Name Type Description
color String 颜色
mode String 样式模式
value String 当前Segment的value, 用于触发制定value的子组件

对外事件 / Fires:

用法 / Usages

<Header>
   <Navbar>
       <Title>普通用法</Title>
   </Navbar>
   <Toolbar>
       <!--content-->
       <Segment v-model="fruit" @onChange="onChangeHandler">
           <SegmentButton value="apple" @onSelect="onSelectHandler">Apple</SegmentButton>
           <SegmentButton value="orange" @onSelect="onSelectHandler">Orange</SegmentButton>
           <SegmentButton value="pear" @onSelect="onSelectHandler">Pear</SegmentButton>
           <SegmentButton value="disabled" :disabled="true" @onSelect="onSelectHandler">Disabled</SegmentButton>
       </Segment>
   </Toolbar>
</Header>

事件 / Events

onChange

源码:
属性 / Properties:
Name Type Description
value string

滚动事件对象

子元素 样式更新后发送onChange事件，并传入value变化值

onSelect

源码:
属性 / Properties:
Name Type Description
value string

当前传入的值

当子元素被点击选中的时触发