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)"
+        />
+      </van-popup>
+    </demo-block>
+
+    <demo-block card :title="t('customColor')">
+      <van-field
+        is-link
+        readonly
+        :label="t('area')"
+        :value="customColor.value"
+        :placeholder="t('selectArea')"
+        @click="customColor.show = true"
+      />
+      <van-popup v-model="customColor.show" round position="bottom">
+        <van-cascader
+          :title="t('selectArea')"
+          :options="t('options')"
+          active-color="#1989fa"
+          @close="customColor.show = false"
+          @finish="onFinish('customColor', $event)"
         />
       </van-popup>
     </demo-block>
@@ -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,
+      };
     },
   },
 };