/*! For license information please see 1348.13ce6a20.js.LICENSE.txt */
(self.webpackChunk=self.webpackChunk||[]).push([["1348"],{95579:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'Cascader
\nIntro
\n
The cascader component is used for the selection of multi-level data. The typical scene is the selection of provinces and cities.
\n
Install
\n
Register component globally via app.use, refer to Component Registration for more registration ways.
\n
import { createApp } from 'vue';\nimport { Cascader } from 'vant';\n\nconst app = createApp();\napp.use(Cascader);\n
\n
Usage
\nBasic Usage
\n
<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="Area"\n placeholder="Select Area"\n @click="show = true"\n/>\n<van-popup v-model="show" round position="bottom">\n <van-cascader\n v-model="cascaderValue"\n title="Select Area"\n :options="options"\n @close="show = false"\n @finish="onFinish"\n />\n</van-popup>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const fieldValue = ref('');\n const cascaderValue = ref('');\n const options = [\n {\n text: 'Zhejiang',\n value: '330000',\n children: [{ text: 'Hangzhou', value: '330100' }],\n },\n {\n text: 'Jiangsu',\n value: '320000',\n children: [{ text: 'Nanjing', value: '320100' }],\n },\n ];\n const onFinish = ({ selectedOptions }) => {\n show.value = false;\n fieldValue.value = selectedOptions.map((option) => option.text).join('/');\n };\n\n return {\n show,\n options,\n onFinish,\n fieldValue,\n cascaderValue,\n };\n },\n};\n
\n
Custom Color
\n
<van-cascader\n v-model="cascaderValue"\n title="Select Area"\n :options="options"\n active-color="#ee0a24"\n @close="show = false"\n @finish="onFinish"\n/>\n
\n
Async Options
\n
<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="Area"\n placeholder="Select Area"\n @click="show = true"\n/>\n<van-popup v-model="show" round position="bottom">\n <van-cascader\n v-model="cascaderValue"\n title="Select Area"\n :options="options"\n @close="show = false"\n @change="onChange"\n @finish="onFinish"\n />\n</van-popup>\n
\n
import { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const fieldValue = ref('');\n const cascaderValue = ref('');\n const options = ref([\n {\n text: 'Zhejiang',\n value: '330000',\n children: [],\n },\n ]);\n const onChange = ({ value }) => {\n if (\n value === options.value[0].value &&\n options.value[0].children.length === 0\n ) {\n showLoadingToast('Loading...');\n \n setTimeout(() => {\n options.value[0].children = [\n { text: 'Hangzhou', value: '330100' },\n { text: 'Ningbo', value: '330200' },\n ];\n closeToast();\n }, 1000);\n }\n };\n const onFinish = ({ selectedOptions }) => {\n show.value = false;\n fieldValue.value = selectedOptions.map((option) => option.text).join('/');\n };\n\n return {\n show,\n options,\n onFinish,\n fieldValue,\n cascaderValue,\n };\n },\n};\n
\n
Custom Field Names
\n
<van-cascader\n v-model="code"\n title="Select Area"\n :options="options"\n :field-names="fieldNames"\n/>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const code = ref('');\n const fieldNames = {\n text: 'name',\n value: 'code',\n children: 'items',\n };\n const options = [\n {\n name: 'Zhejiang',\n code: '330000',\n items: [{ name: 'Hangzhou', code: '330100' }],\n },\n {\n name: 'Jiangsu',\n code: '320000',\n items: [{ name: 'Nanjing', code: '320100' }],\n },\n ];\n\n return {\n code,\n options,\n fieldNames,\n };\n },\n};\n
\n
Custom Content
\n
<van-cascader v-model="code" title="Select Area" :options="options">\n <template #options-top="{ tabIndex }">\n <div class="current-level">Current level is {{ tabIndex + 1 }}</div>\n </template>\n</van-cascader>\n\n<style>\n .current-level {\n font-size: 14px;\n padding: 16px 16px 0;\n color: var(--van-gray-6);\n }\n</style>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const code = ref('');\n const options = [\n {\n name: 'Zhejiang',\n code: '330000',\n items: [{ name: 'Hangzhou', code: '330100' }],\n },\n {\n name: 'Jiangsu',\n code: '320000',\n items: [{ name: 'Nanjing', code: '320100' }],\n },\n ];\n\n return {\n code,\n options,\n };\n },\n};\n
\n
API
\nProps
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| v-model | \nValue of selected option | \nstring | number | \n- | \n
\n\n| title | \nTitle | \nstring | \n- | \n
\n\n| options | \nOptions | \nCascaderOption[] | \n[] | \n
\n\n| placeholder | \nPlaceholder of unselected tab | \nstring | \nSelect | \n
\n\n| active-color | \nActive color | \nstring | \n#1989fa | \n
\n\n| swipeable | \nWhether to enable gestures to slide left and right | \nboolean | \ntrue | \n
\n\n| closeable | \nWhether to show close icon | \nboolean | \ntrue | \n
\n\n| show-header | \nWhether to show header | \nboolean | \ntrue | \n
\n\n| close-icon | \nClose icon name | \nstring | \ncross | \n
\n\n| field-names | \nCustom the fields of options | \nCascaderFieldNames | \n{ text: \'text\', value: \'value\', children: \'children\' } | \n
\n\n
\n
Data Structure of CascaderOption
\n
\n\n\n| Key | \nDescription | \nType | \n
\n\n\n\n| text | \nOption text | \nstring | \n
\n\n| value | \nOption value | \nstring | number | \n
\n\n| color | \nText color | \nstring | \n
\n\n| children | \nCascade children | \nCascaderOption[] | \n
\n\n| disabled | \nWhether to disable option | \nboolean | \n
\n\n| className | \nclassName for the option | \nstring | Array | object | \n
\n\n
\n
Events
\n
\n\n\n| Event | \nDescription | \nArguments | \n
\n\n\n\n| change | \nEmitted when active option changed | \n{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number } | \n
\n\n| finish | \nEmitted when all options is selected | \n{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number } | \n
\n\n| close | \nEmitted when the close icon is clicked | \n- | \n
\n\n| click-tab | \nEmitted when a tab is clicked | \nactiveTab: number, title: string | \n
\n\n
\n
Slots
\n
\n\n\n| Name | \nDescription | \nSlotProps | \n
\n\n\n\n| title | \nCustom title | \n- | \n
\n\n| option | \nCustom option text | \n{ option: CascaderOption, selected: boolean } | \n
\n\n| options-top | \nCustom the content above the options | \n{ tabIndex: number } | \n
\n\n| options-bottom | \nCustom the content below the options | \n{ tabIndex: number } | \n
\n\n
\n
Types
\n
The component exports the following type definitions:
\n
import type { CascaderProps, CascaderOption, CascaderFieldNames } from 'vant';\n
\n
Theming
\nCSS Variables
\n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n
\n\n\n| Name | \nDefault Value | \nDescription | \n
\n\n\n\n| --van-cascader-header-height | \n48px | \n- | \n
\n\n| --van-cascader-header-padding | \n0 var(--van-padding-md) | \n- | \n
\n\n| --van-cascader-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
\n\n| --van-cascader-title-line-height | \n20px | \n- | \n
\n\n| --van-cascader-close-icon-size | \n22px | \n- | \n
\n\n| --van-cascader-close-icon-color | \nvar(--van-gray-5) | \n- | \n
\n\n| --van-cascader-selected-icon-size | \n18px | \n- | \n
\n\n| --van-cascader-tabs-height | \n48px | \n- | \n
\n\n| --van-cascader-active-color | \nvar(--van-danger-color) | \n- | \n
\n\n| --van-cascader-options-height | \n384px | \n- | \n
\n\n| --van-cascader-tab-color | \nvar(--van-text-color) | \n- | \n
\n\n| --van-cascader-unselected-tab-color | \nvar(--van-text-color-2) | \n- | \n
\n\n
\n