PickerView 选择器视图

示例

基础用法

<script lang="ts">
  let value = $state<unknown[]>(['周一', '晚上']

  function loader(value: string[]) {
    // value.length === 0
    if (!value?.length) {
      return ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
    // value.length === 1
    else {
      return ['上午', '下午']
    }
  }
</script>

<PickerView bind:value columns={2} {loader} />

注：PickerView 的数据来自 loader 加载函数

联动

<script lang="ts">
  const province = [...]
  const city = [...]
  const area = [...]

  let cascadeValue = $state<unknown[]>([])

  function cascadeLoader(value: string[]) {
    // value.length === 0，取所有的省
    if (!value?.length) {
      return province
    }
    // value.length === 1，根据省取市
    else if (value.length == 1) {
      const re = city.filter(x => x.province === value[0])
      if (re.length) return re

      const pr = province.find(x => x.value === value[0])
      if (!pr) return re

      re.push({ value: `${pr.value}01`, label: pr.label, province: pr.value })
      return re
    }
    // value.length === 2，根据市取区
    else {
      return area.filter(x => x.city === value[1])
    }
  }
</script>

<PickerView bind:value={cascadeValue} columns={3} loader={cascadeLoader} />

注：cascadeLoader 是异步过程。详见 loader 加载函数

PickerView

属性

属性	说明	类型	默认值
value	选中项	unknown[]	$bindable([])
columns	列的数量	number	1
loader	所选项下一级的加载函数	[Loader](#loader-function)	必填

Loader 加载函数

PickerView 每列的数据是由 loader 加载函数提供的。加载函数的格式如下：

/** 加载函数的定义 */
type Loader = (value: any[]) => LoaderResult | Promise<LoaderResult>

/** 加载函数返回值 */
type LoaderResult = (string | PickerItem)[]

/** 加载函数返回值的条目类型 */
interface PickerItem<T = unknown> {
  /** 值 */
  value: T
  /** 显示文本。不填则显示 value */
  label?: string
}

加载函数的参数 value 是一个数组：

1. 当 value.length === 0 时，表示需要返回第 1 列的数据。
2. 当 value.length === 1 时，如果有级联关系，则需要根据 value[0] 返回第 2 列的数据。
3. 以此类推。

加载函数的返回值是一个数组，数组中每个条目的类型可以是 string 和 PickerItem 的混合类型。

当加载函数返回值的条目是 string 类型时，相当于返回了 { value } : PickerItem，其中 value 为提供的字符串。

如果加载函数是异步的 (返回 Promise)，组件会执行异步加载。

注意：当加载函数返回值来自于 http 请求时，您应该考虑将返回值缓存，并在下次使用此值时从缓存直接读取。

事件

事件	说明	类型
onChange	变更事件	(value: any[]) => void