From 5d2bd8f6df78300d1ab6e0b70cd63e4a176b38c4 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 20 Dec 2020 13:57:49 +0800
Subject: [PATCH] feat(Cascader): add close icon

---
 src/cascader/demo/index.vue |  6 +++++-
 src/cascader/index.js       | 11 +++++++++++
 src/cascader/index.less     |  5 +++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/cascader/demo/index.vue b/src/cascader/demo/index.vue
index 6a4d7c1de..2670ce044 100644
--- a/src/cascader/demo/index.vue
+++ b/src/cascader/demo/index.vue
@@ -9,7 +9,11 @@
         @click="showBase = true"
       />
       <van-popup v-model="showBase" round position="bottom">
-        <van-cascader :title="t('selectArea')" :options="t('options')" />
+        <van-cascader
+          :title="t('selectArea')"
+          :options="t('options')"
+          @close="showBase = false"
+        />
       </van-popup>
     </demo-block>
   </demo-section>
diff --git a/src/cascader/index.js b/src/cascader/index.js
index 1419a3720..cd2d63939 100644
--- a/src/cascader/index.js
+++ b/src/cascader/index.js
@@ -81,10 +81,21 @@ export default createComponent({
       }
     },
 
+    onClose() {
+      this.$emit('close');
+    },
+
     renderHeader() {
       return (
         <div class={bem('header')}>
           <h2 class={bem('title')}>{this.slots('title') || this.title}</h2>
+          {this.closeable ? (
+            <Icon
+              name="cross"
+              class={bem('close-icon')}
+              onClick={this.onClose}
+            />
+          ) : null}
         </div>
       );
     },
diff --git a/src/cascader/index.less b/src/cascader/index.less
index 1d6051099..10f1d3c2f 100644
--- a/src/cascader/index.less
+++ b/src/cascader/index.less
@@ -15,6 +15,11 @@
     line-height: @cascader-title-line-height;
   }
 
+  &__close-icon {
+    color: @gray-5;
+    font-size: 22px;
+  }
+
   &__tabs {
     .van-tab {
       flex: none;