feat(Cascader): add events

src/cascader/README.zh-CN.md

@@ -49,9 +49,10 @@ export default {
 ### Events
 
 | 事件   | 说明                   | 回调参数                               |
-| ------- | ---------------- | -------- |
-| change  | 选中项变化时触发 | -        |
-| confirm | 确认选择时触发   | -        |
+| ------ | ---------------------- | -------------------------------------- |
+| change | 选中项变化时触发       | `{ value, selectedOptions, tabIndex }` |
+| finish | 全部选项选择完成后触发 | `{ value, selectedOptions, tabIndex }` |
+| close  | 点击关闭图标时触发     | -                                      |
 
 ### Slots
 

src/cascader/demo/index.vue

@@ -5,14 +5,16 @@
         is-link
         readonly
         :label="t('area')"
+        :value="base.value"
         :placeholder="t('selectArea')"
-        @click="showBase = true"
+        @click="base.show = true"
       />
-      <van-popup v-model="showBase" round position="bottom">
+      <van-popup v-model="base.show" round position="bottom">
         <van-cascader
           :title="t('selectArea')"
           :options="t('options')"
-          @close="showBase = false"
+          @close="base.show = false"
+          @finish="onFinish"
         />
       </van-popup>
     </demo-block>
@@ -37,8 +39,18 @@ export default {
 
   data() {
     return {
-      showBase: false,
+      base: {
+        show: false,
+        value: '',
+      },
     };
   },
+
+  methods: {
+    onFinish({ selectedOptions }) {
+      this.base.show = false;
+      this.base.value = selectedOptions.map((option) => option.text).join('/');
+    },
+  },
 };
 </script>

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,11 +108,11 @@ export default createComponent({
       );
     },
 
-    renderOptions(options, selected, tabIndex) {
-      return (
-        <ul class={bem('options')}>
-          {options.map((option) => {
-            const isSelected = option.value === selected;
+    renderOptions(options, selectedOption, tabIndex) {
+      const renderOption = (option) => {
+        const isSelected =
+          selectedOption && option.value === selectedOption.value;
+
         return (
           <li
             class={bem('option', { selected: isSelected })}
@@ -119,8 +127,26 @@ export default createComponent({
             ) : null}
           </li>
         );
+      };
+
+      return <ul class={bem('options')}>{options.map(renderOption)}</ul>;
+    },
+
+    renderTab(item, tabIndex) {
+      const { options, selectedOption } = item;
+      const title = selectedOption
+        ? selectedOption.text
+        : this.placeholder || this.t('placeholder');
+
+      return (
+        <Tab
+          title={title}
+          titleClass={bem('tab-title', {
+            unselected: !selectedOption,
           })}
-        </ul>
+        >
+          {this.renderOptions(options, selectedOption, tabIndex)}
+        </Tab>
       );
     },
 
@@ -133,14 +159,7 @@ export default createComponent({
           class={bem('tabs')}
           color={this.activeColor}
         >
-          {this.tabs.map((item, tabIndex) => (
-            <Tab
-              title={item.title}
-              titleClass={bem('tab-title', { unselected: !item.selected })}
-            >
-              {this.renderOptions(item.options, item.selected, tabIndex)}
-            </Tab>
-          ))}
+          {this.tabs.map(this.renderTab)}
         </Tabs>
       );
     },