Cascader 级联选择

文档地址: https://vant-contrib.gitee.io/vant/#/zh-CN/cascader#dai-ma-yan-shi

级联选择组件可以认为是一个容器. 一般与 输入框 Field 和 弹出层 Popup 一起使用. 在不使用任何的情况下:

所以一般是点击后弹出.

Field 组件样式

<van-field 
  v-model="fieldValue" 
  is-link
  readonly
  label="标题"
  placeholder="提示"
  @click="show=true"
></van-field>

Field 组件就是文本框, 带有标题的文本框, 使用 v-model 双向绑定数据.

is-link 控制显示右侧箭头.

Popup 组件

<van-popup v-model:show="..." position="bottom" round></van-popup>

Cascader 组件

<van-cascader v-model="..." title="标题" :options="数据" @close="..." @finish="...">
</van-cascader>

采用双向数据绑定来实现.

数据绑定的结构为:

export type CascaderOption = {
  text?: string;
  value?: Numeric;
  color?: string;
  disabled?: boolean;
  children?: CascaderOption[];
  className?: unknown;
  [key: PropertyKey]: any;
};

可以通过设置 field-name 来映射绑定的字段.

组件中使用 v-model 实时绑定的数据存储 value 属性的值, 通过 watch 可以监视得到.

而在触发 finish 事件是时候, 参数为 any[] 类型 (官方给出的定义), 实际上是:

其中 value 表示所选择项的 value, 而 selectedOptions 为选中项与其父节点的层级数组项.

tabIndex 为选中项所在树的层级, 从 0 开始计数.

这里属性名需要记住.

Vant 提供了一些可用的省市区的数据, 采用 pinima 的形式封装

# 通过 npm
npm i @vant/area-data

# 通过 yarn
yarn add @vant/area-data

# 通过 pnpm
pnpm add @vant/area-data

# 通过 Bun
bun add @vant/area-data

使用语法:

import { useCascaderAreaData } from '@vant/area-data';
const cascaderOptions = useCascaderAreaData()

另外, 官方提供了业务组件 Area 可以用来作为城市选择.

<van-area></van-area>

自定义选项上方的内容

在选项上方有一个区域, 使用具名插槽可以定义自定义内容. 例如记忆选中过的项, 提示选择层级等.

插槽名: options-top

插槽参数为: { tabIndex: number }