• Vant React

Cascader 级联选择

介绍

级联选择框,用于多层级数据的选择,典型场景为省市区选择。

引入

import { Cascader } from "@taroify/core"
import { useCascader } from "@taroify/hooks"

代码演示

基础用法

级联选择组件可以搭配 Field 和 Popup 组件使用,示例如下:

import { Cascader, Field, Popup } from "@taroify/core"
import { useCascader } from "@taroify/hooks"
import { ArrowRight } from "@taroify/icons"
import * as _ from "lodash"
import { useState } from "react"
import area from "./area"

function BasicCascader() {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState<string[]>([])
  const [fieldValue, setFieldValue] = useState("")
  const { columns } = useCascader({ value, depth: 3, options: area })
  return (
    <>
      <Field
        readonly
        label="选项值"
        placeholder="请选择地区"
        value={fieldValue}
        rightIcon={<ArrowRight />}
        onClick={() => setOpen(true)}
      />
      <Popup open={open} rounded placement="bottom" onClose={setOpen}>
        <Popup.Close />
        <Cascader
          value={value}
          onSelect={setValue}
          onChange={(values, options) => {
            setOpen(false)
            setFieldValue(
              _.join(
                _.map(options, ({ children }) => children),
                "/",
              ),
            )
          }}
        >
          <Cascader.Header>请选择所在地区</Cascader.Header>
          {
            _.map(columns, (options, index) => (
              <Cascader.Tab key={index}>
                {
                  _.map(options, (option) => (
                    <Cascader.Option key={option.value} value={option.value}>
                      {option.label}
                    </Cascader.Option>
                  ))
                }
              </Cascader.Tab>
            ))
          }
        </Cascader>
      </Popup>
    </>
  )
}

自定义颜色

通过 CSS 变量来设置选中状态的高亮颜色。

<Cascader className="custom-color" />
.custom-color {
  --tabs-active-color: #1989fa;
  --cascader-active-color: #1989fa;
}

API

Cascader Props

参数 说明 类型 默认值
title 顶部标题 string -
defaultValue 默认选中项的值 any[] -
value 选中项的值 any[] -
placeholder 未选中时的提示文案 string 请选择
swipeable 是否开启手势左右滑动切换 boolean false

Cascader.Header Props

参数 说明 类型 默认值
children 头部内容 ReactNoe -

Cascader.Tab Props

参数 说明 类型 默认值
children 子选项列表 ReactNoe -

Cascader.Option Props

参数 说明 类型 默认值
children 选项内容(必填) ReactNoe -
value 选项对应的值(必填) string | number -
disabled 是否禁用选项 boolean false

Cascader Events

事件 说明 回调参数
onSelect 选中项变化时触发 values: any[], options: Cascader.OptionObject[]
onChange 全部选项选择完成后触发 values: any[], options: Cascader.OptionObject[]
onTabClick 点击标签时触发 event: Tabs.TabEvent

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
—cascader-active-color var(—danger-color) -
—cascader-header-height 48px * $hd -
—cascader-header-padding 0 var(—padding-md) -
—cascader-header-font-size var(—font-size-lg) -
—cascader-header-font-weight var(—font-weight-bold) -
—cascader-header-line-height 20px * $hd -
—cascader-tabs-height 48px * $hd -
—cascader-tab-font-weight var(—font-weight-bold) -
—cascader-tab-color var(—text-color) -
—cascader-inactive-tab-color var(—gray-6) -
—cascader-options-height 384px * $hd -
—cascader-option-padding 10px * $hd var(—padding-md) -
—cascader-option-font-size var(—font-size-md) -
—cascader-option-line-height var(—line-height-md) -
—cascader-option-active-background-color var(—active-color) -
—cascader-disabled-option-color var(—gray-5) -
—cascader-active-option-color var(—cascader-active-color) -
—cascader-active-option-font-weight var(—font-weight-bold) -
—cascader-active-icon-font-size 18px * $hd -