Picker 选择器

Picker 单独使用时，仅仅是一个弹出框。

Picker 作为 FormItem 的子元素时，会成为表单项，并使 FormItem 成为可点击状态。

示例

基础用法

<Button onclick={() => (visible = true)}>选择</Button>
<Picker header="请选择" bind:visible columns={2} {loader} />

注：loader 函数用法详见 PickerView

表单-水平布局

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

  let form = $state({
    location: ['65', '6527', '652702'],
  })

  function cascadeLoader(value: string[]) {
    if (!value?.length) {
      return province
    } 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
    } else {
      return area.filter(x => x.city === value[1])
    }
  }
</script>

<Form header="表单-水平布局" bind:data={form} layout="horizontal">
  <FormItem label="地区" field="location" required>
    <Picker
      bind:value={form.location}
      header="请选择"
      placeholder="省/市/区"
      columns={3}
      loader={cascadeLoader}
      clearable
    />
  </FormItem>
</Form>

表单-垂直布局+异步加载+自定义显示

<Form
  header="表单-垂直布局+异步加载+自定义显示"
  bind:data={form}
  layout="vertical"
>
  <FormItem label="地区" field="location" required>
    <Picker
      bind:value={form.location}
      placeholder="省/市/区"
      header="请选择"
      columns={3}
      loader={cascadeLoaderAsync}
      clearable
    >
      {#snippet display(texts)}
        <p>
          {#each texts as text, index}
            <span></span>
            <span>{text}</span>
            {#if index < texts.length - 1}
              <Divider direction="vertical" />
            {/if}
          {/each}
        </p>
      {/snippet}
    </Picker>
  </FormItem>
</Form>

Picker

属性

属性	说明	类型	默认值
value	选中项	unknown[]	$bindable([])
columns	列的数量	number	1
loader	所选项下一级的加载函数	[Loader](./picker-view#loader-function)	必填
header	标题	string | Snippet	undefined
clearable	是否显示清除按钮	boolean	false
noMask	不展示遮罩	boolean	false
keepOpenOnClickMask	阻止点击遮罩关闭	boolean	false

注：loader 函数可以返回 string 或 PickerItem 类型的数组。如果 loader 函数返回了 Promise，组件会执行异步加载。

配合 FormItem

当此组件作为 FormItem 组件的子元素时，以下属性生效。

属性	说明	类型	默认值
display	自定义内容显示	Snippet<[labels: string[]]>	undefined
placeholder	占位文本	string	undefined
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false

事件

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