Select

1.5.0 新增

Select 组件，用于单项选择。

注： 由于此组件依赖 Picker 组件，而 Picker 组件是基于 create-api 实现，所以在使用之前，请确保自己了解过 create-api。

示例

• 基本用法

  对于 Select 选择组件，你需要传入 options 定义各个选项，选择的结果则绑定在 v-model 上。

  <cube-select
    v-model="value"
    :options="options">
  </cube-select>
  

  export default {
    data() {
      return {
        options: [2013, 2014, 2015, 2016, 2017, 2018],
        value: 2016
      }
    }
  }
  

• 配置和事件

  Select 支持选择器标题（title）、占位符（placeholder）、自动弹出选择器（autoPop）、禁用（disabled）的配置。并且在选择时，如果选择的值改变了，会派发 change 事件。

  <cube-select
    v-model="value"
    :title="title"
    :options="options"
    :placeholder="placeholder"
    :auto-pop="autoPop"
    :disabled="disabled"
    @change="change">
  </cube-select>
  

  export default {
    data() {
      return {
        options: [2013, 2014, 2015, 2016, 2017, 2018],
        value: 2016,
        title: '入职时间',
        placeholder: '请选择入职时间',
        autoPop: false,
        disabled: false
      }
    },
    methods: {
      change(value, index, text) {
        console.log('change', value, index, text)
      }
    }
  }
  

  需要注意的一点是，change 事件在你直接赋值修改 value 的值时，不会触发，只会在选择导致的修改时触发。如果你只是想监听 value 的改变，请直接监听 value。

Props 配置

• options 子配置项

你可以将每个选项定义成一个对象，其中 text 为选项文案，value为选项的值，若没有将该选项定义为对象，比如 2014，则我们内部会把它转化成 { value: 2014, text: 2014 }

事件