创建分段选择组件

iOS 中的 Segmented Control 可以起到以下作用:

  • 类似 radio 按钮的单选
  • 视图切换,类似选项卡组件

以下实现普通 CSS/HTML 的实现,并进一步在 Vue.js 下封装可复用组件。

普通 CSS/HTML 的实现,示例及代码:


See the Pen
segmented control
by Marshal Wu (@marshalw)
on CodePen.

结合 使用Vue.js实现选项卡组件 的示例,实现了一个组合的 Vue.js 示例:


See the Pen
tabs-segmented-vue
by Marshal Wu (@marshalw)
on CodePen.

在这个示例中需要注意以下几点:

  • 为了避免 html 标签 css 冲突(input 和 label),通过 class 来区分,实际开发中会用到 style scoped 或者 style module
  • 分段选择组件没有实现为容器,是为了更好的复用
    • 如果作为容器,要用 slot,加入子视图,分段选择组件就需要负责该组件的布局
    • 这样做带来的问题是,选择了哪个分段,必须将选择的值传回给父组件,这里是first-subView
    • 当然可以自己写$parent.emit,并在父组件写事件处理来解决问题,这是 Vue.js 子组件向父组件通讯的基本机制
    • 不过,Vue.js 官方文档建议是,父组件
      • 通过 v-model 方式传参数到子组件
      • 子组件需要做 props 的定义,这是因为 input radio 的特殊性造成的
      • 子组件在 input 标签 @change="$emit('change', $event.target.value)"即可,不必再父组件再写事件处理