Cube-UI 选择器组件 Select 详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00450/article/details/148419172

Cube-UI 选择器组件 Select 详解

cube-ui :large_orange_diamond: A fantastic mobile ui lib implement by Vue 项目地址: https://gitcode.com/gh_mirrors/cu/cube-ui

什么是 Select 组件

Select 是 Cube-UI 框架中提供的一个选择器组件（1.5.0+版本新增），它基于 Picker 组件实现，提供了美观易用的下拉选择功能。该组件非常适合在移动端应用中使用，能够帮助开发者快速实现各种选择场景。

核心特性

数据绑定：支持 v-model 双向数据绑定
丰富配置：可自定义标题、占位符、确认/取消按钮文本等
事件监听：提供多种事件监听选择变化
自动转换：自动将简单数组转换为标准选项格式
状态控制：支持禁用状态和自动弹出控制

基础使用

最简单的使用方式

只需要定义 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
    }
  }
}

在这个例子中，组件会自动将数字数组转换为标准的选项格式 {value: 2013, text: 2013}。

完整配置示例

<cube-select
  v-model="value"
  :title="title"
  :options="options"
  :placeholder="placeholder"
  :auto-pop="autoPop"
  :disabled="disabled"
  cancelTxt="取消"
  confirmTxt="确定"
  @change="change">
</cube-select>

export default {
  data() {
    return {
      options: [
        { value: 2013, text: '2013年' },
        { value: 2014, text: '2014年' },
        // 其他年份...
      ],
      value: 2016,
      title: '入职时间',
      placeholder: '请选择入职时间',
      autoPop: false,
      disabled: false
    }
  },
  methods: {
    change(value, index, text) {
      console.log('选择变化', value, index, text)
    }
  }
}

配置项详解

Props 属性

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | |-------|------|------|-------|-------| | options | 选项数组 | Array | - | [] | | v-model | 选中的值 | Any | - | - | | placeholder | 未选择时的占位文本 | String | - | '请选择' | | autoPop | 是否自动弹出选择器 | Boolean | true/false | false | | disabled | 是否禁用 | Boolean | true/false | false | | title | 选择器标题 | String | - | '请选择' | | cancelTxt | 取消按钮文本 | String | - | '取消' | | confirmTxt | 确认按钮文本 | String | - | '确认' |

Options 配置

当 options 中的元素是对象时，支持以下配置：

| 属性名 | 说明 | 类型 | 示例 | |-------|------|------|------| | value | 选项的值 | Any | 2013 | | text | 选项显示文本 | String | '2013年' |

如果元素不是对象（如数字、字符串等），组件会自动转换为 {value: 原值, text: 原值} 的格式。

事件系统

Select 组件提供了丰富的事件监听：

| 事件名 | 说明 | 参数1 | 参数2 | 参数3 | |-------|------|-------|-------|-------| | input | 选中值变化时触发 | 选中的值 | - | - | | change | 通过选择改变值时触发 | 选中的值 | 选中项的索引 | 选中项的文本 | | picker-show | 选择器显示时触发 | - | - | - | | picker-hide | 选择器隐藏时触发 | - | - | - |

重要提示：change 事件仅在用户通过选择器操作改变值时触发，直接修改 v-model 绑定的值不会触发此事件。如果需要监听所有值变化，请使用 watch 监听 v-model。