From 8180478213d36ba83868f5dd9ccccb222a945c06 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 2 Jul 2020 14:33:34 +0800 Subject: [PATCH 01/19] feat: add Cascader component --- src/cascader/README.md | 40 +++++++++++++++++++++++ src/cascader/README.zh-CN.md | 60 ++++++++++++++++++++++++++++++++++ src/cascader/demo/index.vue | 35 ++++++++++++++++++++ src/cascader/index.js | 55 +++++++++++++++++++++++++++++++ src/cascader/index.less | 33 +++++++++++++++++++ src/cascader/test/demo.spec.js | 4 +++ src/style/var.less | 7 ++++ vant.config.js | 8 +++++ 8 files changed, 242 insertions(+) create mode 100644 src/cascader/README.md create mode 100644 src/cascader/README.zh-CN.md create mode 100644 src/cascader/demo/index.vue create mode 100644 src/cascader/index.js create mode 100644 src/cascader/index.less create mode 100644 src/cascader/test/demo.spec.js diff --git a/src/cascader/README.md b/src/cascader/README.md new file mode 100644 index 000000000..f530c2937 --- /dev/null +++ b/src/cascader/README.md @@ -0,0 +1,40 @@ +# Cascader + +### Intro + +### Install + +```js +import Vue from 'vue'; +import { Cascader } from 'vant'; + +Vue.use(Cascader); +``` + +## Usage + +### Basic Usage + +```html + +``` + +## API + +### Props + +| Attribute | Description | Type | Default | +| --------- | ----------- | ---- | ------- | + + +### Events + +| Event | Description | Arguments | +| ----- | ----------- | --------- | + + +### Slots + +| Name | Description | +| ---- | ----------- | + diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md new file mode 100644 index 000000000..07e2afbc7 --- /dev/null +++ b/src/cascader/README.zh-CN.md @@ -0,0 +1,60 @@ +# Cascader 级联选择 + +### 介绍 + +级联选择框，用于多层级数据的选择，典型场景为省市区选择，2.9 版本开始支持此组件。 + +### 引入 + +```js +import Vue from 'vue'; +import { Cascader } from 'vant'; + +Vue.use(Cascader); +``` + +## 代码演示 + +### 基础用法 + +```html + +``` + +```js +export default { + data() { + return { + show: false, + }; + }, +}; +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | -------------------- | --------------------- | --------- | +| show.sync | 是否显示级联选择弹窗 | _boolean_ | `false` | +| title | 顶部标题 | _string_ | - | +| value | 选中项的值 | `string[] | number[]` | - | +| options | 可选项数据源 | _Option[]_ | `[]` | +| placeholder | 未选中时的提示文案 | _string_ | `请选择` | +| confirm-text | 确认按钮文字 | _string_ | `确认` | +| active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` | + +### Events + +| 事件 | 说明 | 回调参数 | +| ------- | ---------------- | -------- | +| change | 选中项变化时触发 | - | +| confirm | 确认选择时触发 | - | + +### Slots + +| 名称 | 说明 | +| ------------ | -------------- | +| title | 自定义顶部标题 | +| confirm-text | 自定义确认按钮 | diff --git a/src/cascader/demo/index.vue b/src/cascader/demo/index.vue new file mode 100644 index 000000000..271fc5610 --- /dev/null +++ b/src/cascader/demo/index.vue @@ -0,0 +1,35 @@ + + + diff --git a/src/cascader/index.js b/src/cascader/index.js new file mode 100644 index 000000000..f5d8b93bf --- /dev/null +++ b/src/cascader/index.js @@ -0,0 +1,55 @@ +import { createNamespace } from '../utils'; +import Popup from '../popup'; + +const [createComponent, bem] = createNamespace('cascader'); + +export default createComponent({ + props: { + show: Boolean, + value: Array, + title: String, + options: Array, + placeholder: String, + confirmText: String, + activeColor: String, + }, + + methods: { + toggle(val) { + this.$emit('update:show', val); + }, + + confirm() { + this.toggle(false); + }, + + genHeader() { + const confirmText = this.confirmText || this.t('confirm'); + return ( +
+

{this.slots('title') || this.title}

+ +
+ ); + }, + + genTab() {}, + }, + + render() { + return ( + + {this.genHeader()} + {this.genTab()} + + ); + }, +}); diff --git a/src/cascader/index.less b/src/cascader/index.less new file mode 100644 index 000000000..d78dc4dd8 --- /dev/null +++ b/src/cascader/index.less @@ -0,0 +1,33 @@ +@import '../style/var'; + +.van-cascader { + &__header { + display: flex; + align-items: center; + justify-content: space-between; + height: @cascader-header-height; + padding: 0 @padding-md; + } + + &__title { + font-size: @cascader-title-font-size; + font-weight: @font-weight-bold; + line-height: @cascader-title-line-height; + } + + &__confirm { + height: 100%; + // expand click area + padding: 0 @padding-md; + margin-right: -@padding-md; + color: @cascader-confirm-color; + font-size: @cascader-confirm-font-size; + background-color: transparent; + border: none; + cursor: pointer; + + &:active { + opacity: @active-opacity; + } + } +} diff --git a/src/cascader/test/demo.spec.js b/src/cascader/test/demo.spec.js new file mode 100644 index 000000000..5c70922b5 --- /dev/null +++ b/src/cascader/test/demo.spec.js @@ -0,0 +1,4 @@ +import Demo from '../demo'; +import { snapshotDemo } from '../../../test/demo'; + +snapshotDemo(Demo); diff --git a/src/style/var.less b/src/style/var.less index ad781be3a..1641457f3 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -201,6 +201,13 @@ @card-price-integer-font-size: @font-size-lg; @card-price-font-family: @price-integer-font-family; +// Cascader +@cascader-header-height: 48px; +@cascader-title-font-size: @font-size-lg; +@cascader-title-line-height: 20px; +@cascader-confirm-color: @text-link-color; +@cascader-confirm-font-size: @font-size-md; + // Cell @cell-font-size: @font-size-md; @cell-line-height: 24px; diff --git a/vant.config.js b/vant.config.js index af14cccff..1206b1d92 100644 --- a/vant.config.js +++ b/vant.config.js @@ -142,6 +142,10 @@ module.exports = { path: 'calendar', title: 'Calendar 日历', }, + { + path: 'cascader', + title: 'Cascader 级联选择' + }, { path: 'checkbox', title: 'Checkbox 复选框', @@ -509,6 +513,10 @@ module.exports = { path: 'calendar', title: 'Calendar', }, + { + path: 'cascader', + title: 'Cascader' + }, { path: 'checkbox', title: 'Checkbox', From 0352f5d9a61f987c0e6f86ef5c5f2ebb62cb41c4 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 19 Dec 2020 16:08:40 +0800 Subject: [PATCH 02/19] feat(Cascader): basic dom struct --- src/cascader/README.zh-CN.md | 30 ++++----- src/cascader/demo/area.js | 122 +++++++++++++++++++++++++++++++++++ src/cascader/demo/index.vue | 9 ++- src/cascader/index.js | 83 +++++++++++++++++------- src/cascader/index.less | 42 ++++++++---- src/locale/lang/zh-CN.ts | 3 + src/style/var.less | 2 - 7 files changed, 236 insertions(+), 55 deletions(-) create mode 100644 src/cascader/demo/area.js diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md index 07e2afbc7..4fc6e99a7 100644 --- a/src/cascader/README.zh-CN.md +++ b/src/cascader/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -级联选择框，用于多层级数据的选择，典型场景为省市区选择，2.9 版本开始支持此组件。 +级联选择框，用于多层级数据的选择，典型场景为省市区选择，2.12 版本开始支持此组件。 ### 引入 @@ -18,7 +18,9 @@ Vue.use(Cascader); ### 基础用法 ```html - + + + ``` ```js @@ -35,15 +37,14 @@ export default { ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ------------ | -------------------- | --------------------- | --------- | -| show.sync | 是否显示级联选择弹窗 | _boolean_ | `false` | -| title | 顶部标题 | _string_ | - | -| value | 选中项的值 | `string[] | number[]` | - | -| options | 可选项数据源 | _Option[]_ | `[]` | -| placeholder | 未选中时的提示文案 | _string_ | `请选择` | -| confirm-text | 确认按钮文字 | _string_ | `确认` | -| active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | ------------------ | ---------------------- | --------- | +| title | 顶部标题 | _string_ | - | +| value | 选中项的值 | _string[] \| number[]_ | - | +| options | 可选项数据源 | _Option[]_ | `[]` | +| placeholder | 未选中时的提示文案 | _string_ | `请选择` | +| active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` | +| closeable | 是否显示关闭图标 | _boolean_ | `true` | ### Events @@ -54,7 +55,6 @@ export default { ### Slots -| 名称 | 说明 | -| ------------ | -------------- | -| title | 自定义顶部标题 | -| confirm-text | 自定义确认按钮 | +| 名称 | 说明 | +| ----- | -------------- | +| title | 自定义顶部标题 | diff --git a/src/cascader/demo/area.js b/src/cascader/demo/area.js new file mode 100644 index 000000000..c9f297f14 --- /dev/null +++ b/src/cascader/demo/area.js @@ -0,0 +1,122 @@ +export default [ + { + text: '浙江省', + value: '330000', + children: [ + { + text: '杭州市', + value: '330100', + children: [ + { + text: '上城区', + value: '330102', + }, + { + text: '下城区', + value: '330103', + }, + { + text: '江干区', + value: '330104', + }, + ], + }, + { + text: '宁波市', + value: '330200', + children: [ + { + text: '海曙区', + value: '330203', + }, + { + text: '江北区', + value: '330205', + }, + { + text: '北仑区', + value: '330206', + }, + ], + }, + { + text: '温州市', + value: '330300', + children: [ + { + text: '鹿城区', + value: '330302', + }, + { + text: '龙湾区', + value: '330303', + }, + { + text: '瓯海区', + value: '330304', + }, + ], + }, + ], + }, + { + text: '江苏省', + value: '320000', + children: [ + { + text: '南京市', + value: '320100', + children: [ + { + text: '玄武区', + value: '320102', + }, + { + text: '秦淮区', + value: '320104', + }, + { + text: '建邺区', + value: '320105', + }, + ], + }, + { + text: '无锡市', + value: '320200', + children: [ + { + text: '锡山区', + value: '320205', + }, + { + text: '惠山区', + value: '320206', + }, + { + text: '滨湖区', + value: '320211', + }, + ], + }, + { + text: '徐州市', + value: '320300', + children: [ + { + text: '鼓楼区', + value: '320302', + }, + { + text: '云龙区', + value: '320303', + }, + { + text: '贾汪区', + value: '320305', + }, + ], + }, + ], + }, +]; diff --git a/src/cascader/demo/index.vue b/src/cascader/demo/index.vue index 271fc5610..6a4d7c1de 100644 --- a/src/cascader/demo/index.vue +++ b/src/cascader/demo/index.vue @@ -1,6 +1,6 @@ diff --git a/src/cascader/index.js b/src/cascader/index.js index 2e182d7e3..297a6d7bc 100644 --- a/src/cascader/index.js +++ b/src/cascader/index.js @@ -46,17 +46,15 @@ export default createComponent({ } else { this.tabs = [ { - title: this.placeholder || this.t('placeholder'), options: this.options, - selected: null, + selectedOption: null, }, ]; } }, onSelect(option, tabIndex) { - this.tabs[tabIndex].title = option.text; - this.tabs[tabIndex].selected = option.value; + this.tabs[tabIndex].selectedOption = option; if (this.tabs.length > tabIndex + 1) { this.tabs = this.tabs.slice(0, tabIndex + 1); @@ -64,9 +62,8 @@ export default createComponent({ if (option.children) { const nextTab = { - title: this.placeholder || this.t('placeholder'), options: option.children, - selected: null, + selectedOption: null, }; if (this.tabs[tabIndex + 1]) { @@ -79,6 +76,17 @@ export default createComponent({ this.activeTab++; }); } + + const eventParams = { + value: option.value, + tabIndex, + selectedOptions: this.tabs.map((tab) => tab.selectedOption), + }; + this.$emit('change', eventParams); + + if (!option.children) { + this.$emit('finish', eventParams); + } }, onClose() { @@ -100,27 +108,45 @@ export default createComponent({ ); }, - renderOptions(options, selected, tabIndex) { + renderOptions(options, selectedOption, tabIndex) { + const renderOption = (option) => { + const isSelected = + selectedOption && option.value === selectedOption.value; + + return ( +
  • { + this.onSelect(option, tabIndex); + }} + > + {option.text} + {isSelected ? ( + + ) : null} +
    • + ); + }; + + return
      {options.map(renderOption)}
    ; + }, + + renderTab(item, tabIndex) { + const { options, selectedOption } = item; + const title = selectedOption + ? selectedOption.text + : this.placeholder || this.t('placeholder'); + return ( -
      - {options.map((option) => { - const isSelected = option.value === selected; - return ( -
    • { - this.onSelect(option, tabIndex); - }} - > - {option.text} - {isSelected ? ( - - ) : null} -
      • - ); + + > + {this.renderOptions(options, selectedOption, tabIndex)} + ); }, @@ -133,14 +159,7 @@ export default createComponent({ class={bem('tabs')} color={this.activeColor} > - {this.tabs.map((item, tabIndex) => ( - - {this.renderOptions(item.options, item.selected, tabIndex)} - - ))} + {this.tabs.map(this.renderTab)} ); }, From e195640e675fc330f401e0fceb0f6a9677476139 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 20 Dec 2020 14:28:14 +0800 Subject: [PATCH 07/19] docs(Cascader): add custom color demo --- src/cascader/demo/index.vue | 39 ++++++++++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 5 deletions(-) diff --git a/src/cascader/demo/index.vue b/src/cascader/demo/index.vue index 680ec6587..89ea705f1 100644 --- a/src/cascader/demo/index.vue +++ b/src/cascader/demo/index.vue @@ -14,7 +14,27 @@ :title="t('selectArea')" :options="t('options')" @close="base.show = false" - @finish="onFinish" + @finish="onFinish('base', $event)" + /> + + + + + + + @@ -28,12 +48,14 @@ export default { i18n: { 'zh-CN': { area: '地区', - selectArea: '请选择地区', options: zhCNOptions, + selectArea: '请选择地区', + customColor: '自定义颜色', }, 'en-US': { area: 'Area', selectArea: 'Select Area', + customColor: 'Custom Color', }, }, @@ -43,13 +65,20 @@ export default { show: false, value: '', }, + customColor: { + show: false, + value: '', + }, }; }, methods: { - onFinish({ selectedOptions }) { - this.base.show = false; - this.base.value = selectedOptions.map((option) => option.text).join('/'); + onFinish(type, { selectedOptions }) { + const fieldValue = selectedOptions.map((option) => option.text).join('/'); + this[type] = { + show: false, + value: fieldValue, + }; }, }, }; From 42d319d478eb3a862a11eefc46a212e433e89d7a Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 20 Dec 2020 14:28:38 +0800 Subject: [PATCH 08/19] types(Cascader): add typing --- types/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/types/index.d.ts b/types/index.d.ts index 245ef676d..53c2eb478 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -35,6 +35,7 @@ export class AddressList extends VanComponent {} export class Badge extends VanComponent {} export class Button extends VanComponent {} export class Card extends VanComponent {} +export class Cascader extends VanComponent {} export class Cell extends VanComponent {} export class CellGroup extends VanComponent {} export class Circle extends VanComponent {} From a05da0644b8099051cca37cf026269eed98c60f6 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 20 Dec 2020 15:33:21 +0800 Subject: [PATCH 09/19] feat(Cascader): watch value and reset options --- src/cascader/README.zh-CN.md | 16 +++---- src/cascader/demo/index.vue | 17 +++++--- src/cascader/index.js | 82 ++++++++++++++++++++++++++++++------ 3 files changed, 87 insertions(+), 28 deletions(-) diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md index b5f8bb210..ddcce28e2 100644 --- a/src/cascader/README.zh-CN.md +++ b/src/cascader/README.zh-CN.md @@ -37,14 +37,14 @@ export default { ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ------------ | ------------------ | ---------------------- | --------- | -| title | 顶部标题 | _string_ | - | -| value | 选中项的值 | _string[] \| number[]_ | - | -| options | 可选项数据源 | _Option[]_ | `[]` | -| placeholder | 未选中时的提示文案 | _string_ | `请选择` | -| active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` | -| closeable | 是否显示关闭图标 | _boolean_ | `true` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | ------------------ | ------------------ | --------- | +| title | 顶部标题 | _string_ | - | +| value | 选中项的值 | _string \| number_ | - | +| options | 可选项数据源 | _Option[]_ | `[]` | +| placeholder | 未选中时的提示文案 | _string_ | `请选择` | +| active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` | +| closeable | 是否显示关闭图标 | _boolean_ | `true` | ### Events diff --git a/src/cascader/demo/index.vue b/src/cascader/demo/index.vue index 89ea705f1..7ae0bf22b 100644 --- a/src/cascader/demo/index.vue +++ b/src/cascader/demo/index.vue @@ -5,12 +5,13 @@ is-link readonly :label="t('area')" - :value="base.value" + :value="base.result" :placeholder="t('selectArea')" @click="base.show = true" /> option.text).join('/'); + onFinish(type, { value, selectedOptions }) { + const result = selectedOptions.map((option) => option.text).join('/'); this[type] = { show: false, - value: fieldValue, + value, + result, }; }, }, diff --git a/src/cascader/index.js b/src/cascader/index.js index 297a6d7bc..efef6be69 100644 --- a/src/cascader/index.js +++ b/src/cascader/index.js @@ -7,8 +7,8 @@ const [createComponent, bem] = createNamespace('cascader'); export default createComponent({ props: { - value: Array, title: String, + value: [Number, String], options: Array, placeholder: String, activeColor: String, @@ -30,29 +30,82 @@ export default createComponent({ // reset options and tab }, - value() { - // reset options and tab + value(value) { + if (value) { + const values = this.tabs.map((tab) => tab.selectedOption?.value); + if (values.indexOf(value) !== -1) { + return; + } + } + this.updateTabs(); }, }, created() { - this.init(); + this.updateTabs(); }, methods: { - init() { - if (this.value) { - // - } else { - this.tabs = [ - { - options: this.options, - selectedOption: null, - }, - ]; + getSelectedOptionsByValue(options, value) { + for (let i = 0; i < options.length; i++) { + const option = options[i]; + + if (option.value === value) { + return [option]; + } + + if (option.children) { + const selectedOptions = this.getSelectedOptionsByValue( + option.children, + value + ); + if (selectedOptions) { + return [option, ...selectedOptions]; + } + } } }, + updateTabs() { + if (this.value) { + const selectedOptions = this.getSelectedOptionsByValue( + this.options, + this.value + ); + + if (selectedOptions) { + let optionsCursor = this.options; + + this.tabs = selectedOptions.map((option) => { + const tab = { + options: optionsCursor, + selectedOption: option, + }; + + const next = optionsCursor.filter( + (item) => item.value === option.value + ); + if (next.length) { + optionsCursor = next[0].children; + } + + return tab; + }); + + this.activeTab = selectedOptions.length - 1; + + return; + } + } + + this.tabs = [ + { + options: this.options, + selectedOption: null, + }, + ]; + }, + onSelect(option, tabIndex) { this.tabs[tabIndex].selectedOption = option; @@ -82,6 +135,7 @@ export default createComponent({ tabIndex, selectedOptions: this.tabs.map((tab) => tab.selectedOption), }; + this.$emit('input', option.value); this.$emit('change', eventParams); if (!option.children) { From 04d656131509b709b0f92a847bc933f037f3347f Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 20 Dec 2020 19:50:19 +0800 Subject: [PATCH 10/19] fix(Cascader): incorrect tabs --- src/cascader/index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/cascader/index.js b/src/cascader/index.js index efef6be69..b8c3e155d 100644 --- a/src/cascader/index.js +++ b/src/cascader/index.js @@ -27,7 +27,7 @@ export default createComponent({ watch: { options() { - // reset options and tab + this.updateTabs(); }, value(value) { @@ -92,7 +92,14 @@ export default createComponent({ return tab; }); - this.activeTab = selectedOptions.length - 1; + if (optionsCursor) { + this.tabs.push({ + options: optionsCursor, + selectedOption: null, + }); + } + + this.activeTab = this.tabs.length - 1; return; } From 4c1c786ae62fc79cd15a951aec3328bc63a1fe3c Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 20 Dec 2020 20:15:59 +0800 Subject: [PATCH 11/19] docs(Cascader): add demos --- src/cascader/README.md | 82 +++++++++++-- src/cascader/README.zh-CN.md | 53 +++++++- src/cascader/demo/area-en-US.js | 122 +++++++++++++++++++ src/cascader/demo/{area.js => area-zh-CN.js} | 0 src/cascader/demo/index.vue | 4 +- src/cascader/index.js | 2 +- src/cascader/index.less | 4 + src/locale/lang/zh-CN.ts | 2 +- 8 files changed, 255 insertions(+), 14 deletions(-) create mode 100644 src/cascader/demo/area-en-US.js rename src/cascader/demo/{area.js => area-zh-CN.js} (100%) diff --git a/src/cascader/README.md b/src/cascader/README.md index f530c2937..bdedcb349 100644 --- a/src/cascader/README.md +++ b/src/cascader/README.md @@ -1,7 +1,5 @@ # Cascader -### Intro - ### Install ```js @@ -16,7 +14,64 @@ Vue.use(Cascader); ### Basic Usage ```html - + + + + +``` + +```js +export default { + data() { + return { + show: false, + fieldValue: '', + cascaderValue: '', + options: [ + { + text: 'Zhejiang', + value: '330000', + children: [{ text: 'Hangzhou', value: '330100' }], + }, + { + text: 'Jiangsu', + value: '320000', + children: [{ text: 'Nanjing', value: '320100' }], + }, + ], + }; + }, + methods: { + onFinish(params) { + const { selectedOptions } = params; + this.fieldValue = selectedOptions.map((option) => option.text).join('/'); + }, + }, +}; +``` + +### Custom Color + +```html + ``` ## API @@ -24,17 +79,24 @@ Vue.use(Cascader); ### Props | Attribute | Description | Type | Default | -| --------- | ----------- | ---- | ------- | - +| --- | --- | --- | --- | +| title | Title | _string_ | - | +| value | Values of selected options | _string \| number_ | - | +| options | Options | _Option[]_ | `[]` | +| placeholder | Placeholder of unselected tab | _string_ | `Select` | +| active-color | Active color | _string_ | `#ee0a24` | +| closeable | Whether to show close icon | _boolean_ | `true` | ### Events | Event | Description | Arguments | -| ----- | ----------- | --------- | - +| --- | --- | --- | +| change | Emitted when active option changed | `{ value, selectedOptions, tabIndex }` | +| finish | Emitted when all options is selected | `{ value, selectedOptions, tabIndex }` | +| close | Emmitted when the close icon is clicked | - | ### Slots -| Name | Description | -| ---- | ----------- | - +| Name | Description | +| ----- | ------------ | +| title | Custom title | diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md index ddcce28e2..7784b9893 100644 --- a/src/cascader/README.zh-CN.md +++ b/src/cascader/README.zh-CN.md @@ -17,9 +17,24 @@ Vue.use(Cascader); ### 基础用法 +级联选择组件可以搭配 Field 和 Popup 组件使用，示例如下： + ```html + - + ``` @@ -28,11 +43,47 @@ export default { data() { return { show: false, + fieldValue: '', + cascaderValue: '', + // 选项列表，children 代表子选项，支持多级嵌套 + options: [ + { + text: '浙江省', + value: '330000', + children: [{ text: '杭州市', value: '330100' }], + }, + { + text: '江苏省', + value: '320000', + children: [{ text: '南京市', value: '320100' }], + }, + ], }; }, + methods: { + // 全部选项选择完毕后，会触发 finish 事件 + onFinish(params) { + const { selectedOptions } = params; + this.fieldValue = selectedOptions.map((option) => option.text).join('/'); + }, + }, }; ``` +### 自定义颜色 + +通过 `active-color` 属性来设置选中状态的高亮颜色。 + +```html + +``` + ## API ### Props diff --git a/src/cascader/demo/area-en-US.js b/src/cascader/demo/area-en-US.js new file mode 100644 index 000000000..8f0fa88be --- /dev/null +++ b/src/cascader/demo/area-en-US.js @@ -0,0 +1,122 @@ +export default [ + { + text: 'Zhejiang', + value: '330000', + children: [ + { + text: 'Hangzhou', + value: '330100', + children: [ + { + text: 'Shangcheng', + value: '330102', + }, + { + text: 'Xiacheng', + value: '330103', + }, + { + text: 'Jianggan', + value: '330104', + }, + ], + }, + { + text: 'Ningbo', + value: '330200', + children: [ + { + text: 'Haishu', + value: '330203', + }, + { + text: 'Jiangbei', + value: '330205', + }, + { + text: 'Beilun', + value: '330206', + }, + ], + }, + { + text: 'Wenzhou', + value: '330300', + children: [ + { + text: 'Lucheng', + value: '330302', + }, + { + text: 'Longwan', + value: '330303', + }, + { + text: 'Ouhai', + value: '330304', + }, + ], + }, + ], + }, + { + text: 'Jiangsu', + value: '320000', + children: [ + { + text: 'Nanjing', + value: '320100', + children: [ + { + text: 'Xuanwu', + value: '320102', + }, + { + text: 'Qinghuai', + value: '320104', + }, + { + text: 'Jianye', + value: '320105', + }, + ], + }, + { + text: 'Wuxi', + value: '320200', + children: [ + { + text: 'Xishan', + value: '320205', + }, + { + text: 'Huishan', + value: '320206', + }, + { + text: 'Binhu', + value: '320211', + }, + ], + }, + { + text: 'Xuzhou', + value: '320300', + children: [ + { + text: 'Gulou', + value: '320302', + }, + { + text: 'Yunlong', + value: '320303', + }, + { + text: 'Jiawang', + value: '320305', + }, + ], + }, + ], + }, +]; diff --git a/src/cascader/demo/area.js b/src/cascader/demo/area-zh-CN.js similarity index 100% rename from src/cascader/demo/area.js rename to src/cascader/demo/area-zh-CN.js diff --git a/src/cascader/demo/index.vue b/src/cascader/demo/index.vue index 7ae0bf22b..69f2c9246 100644 --- a/src/cascader/demo/index.vue +++ b/src/cascader/demo/index.vue @@ -44,7 +44,8 @@