# 滚轮选择器（DofPicker）

组件库实现的滚轮选择器，支持单列、多列和时间模式。App 原生选择器见 Picker。

# 基础用法

<template>
  <dof-picker :list-array="options" :item-index="[0]" :need-dark-mode="true" @onChange="onChange" />
</template>

<script>
import { DofPicker } from 'dolphin-intl-ui'

export default {
  components: { DofPicker },
  data() {
    return { options: [{value: '低'}, {value: '中'}, {value: '高'}] }
  },
  methods: {
    onChange(value) {
      console.log(value)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Attributes

Prop Type Required Default Description
mode String N 'selector' selector 单列、two-column 多列、time 时间模式
listArray Array N [] 单列为包含 value 字段的选项数组；多列为选项数组的数组
wrapWidth Array N [] 多列模式下各列宽度权重；必须与列数对应，权重之和应大于 0
itemIndex Array N 按 listArray.length 生成全 0 数组 单列读取首项，多列读取各列索引；时间模式不读取该参数
label Array N [] 单列读取首项，多列使用对应列标签；时间模式固定为时、分
labelOffset Number N null 标签偏移量，当前版本不生效
align String N 'center' 对齐方式，当前版本不生效
needDarkMode Boolean N false 是否启用内置暗黑适配
backgroundColor String N '' 背景色
textColor String N '' 文字颜色
selectedTextColor String N '' 选中项文字颜色
labelColor String N '' 标签文字颜色
indicatorColor String N '' 指示器颜色
itemBackgroundColor String N '' 滚轮项背景色
isRTL Boolean N false 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

selector、two-column、time 三种模式向滚轮透传暗黑开关和颜色。未传 selectedTextColor 时，显式 textColor 同时作为选中文字颜色；未传 itemBackgroundColor 时，显式 backgroundColor 同时作为滚轮项背景。

# 使用说明

多列模式应同时提供 listArray、wrapWidth、label 和 itemIndex，并保证各数组长度与列数一致。time 模式默认选中 10:30，不自动同步当前时间。

# Events

事件 说明 回调参数
onChange 单列选择 { index, value }
onChange 多列选择 各列 { index, value } 的数组
onChange 时间选择 [{ index: 0, value: 小时 }, { index: 1, value: 分钟 }]

← 4.10 网格选择（Grid Select） →