feat: add Cascader component

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
+<van-area title="Title" :area-list="areaList" />
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --------- | ----------- | ---- | ------- |
+
+
+### Events
+
+| Event | Description | Arguments |
+| ----- | ----------- | --------- |
+
+
+### Slots
+
+| Name | Description |
+| ---- | ----------- |
+

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
+<van-cascader />
+```
+
+```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 | 自定义确认按钮 |

src/cascader/demo/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <demo-section>
+    <demo-block :title="t('basicUsage')">
+      <van-field
+        is-link
+        readonly
+        :label="t('area')"
+        :placeholder="t('selectArea')"
+        @click="showBase = true"
+      />
+      <van-cascader :show.sync="showBase" :title="t('selectArea')" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      area: '地区',
+      selectArea: '请选择地区',
+    },
+    'en-US': {
+      area: 'Area',
+      selectArea: 'Select Area',
+    },
+  },
+
+  data() {
+    return {
+      showBase: false,
+    };
+  },
+};
+</script>

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 (
+        <div class={bem('header')}>
+          <h2 class={bem('title')}>{this.slots('title') || this.title}</h2>
+          <button type="button" class={bem('confirm')} onClick={this.confirm}>
+            {this.slots('confirm-text') || confirmText}
+          </button>
+        </div>
+      );
+    },
+
+    genTab() {},
+  },
+
+  render() {
+    return (
+      <Popup
+        round
+        value={this.show}
+        class={bem()}
+        position="bottom"
+        onInput={this.toggle}
+      >
+        {this.genHeader()}
+        {this.genTab()}
+      </Popup>
+    );
+  },
+});

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;
+    }
+  }
+}

src/cascader/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);

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;

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',