feat(Cascader): basic dom struct

src/cascader/README.zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-级联选择框，用于多层级数据的选择，典型场景为省市区选择，2.9 版本开始支持此组件。
+级联选择框，用于多层级数据的选择，典型场景为省市区选择，2.12 版本开始支持此组件。
 
 ### 引入
 
@@ -18,7 +18,9 @@ Vue.use(Cascader);
 ### 基础用法
 
 ```html
-<van-cascader />
+<van-popup v-model="show" round position="bottom">
+  <van-cascader title="请选择地区" />
+</van-popup>
 ```
 
 ```js
@@ -35,15 +37,14 @@ export default {
 
 ### Props
 
-| 参数         | 说明                 | 类型                  | 默认值    |
+| 参数         | 说明               | 类型                   | 默认值    |
-| ------------ | -------------------- | --------------------- | --------- |
+| ------------ | ------------------ | ---------------------- | --------- |
-| show.sync    | 是否显示级联选择弹窗 | _boolean_             | `false`   |
+| title        | 顶部标题           | _string_               | -         |
-| title        | 顶部标题             | _string_              | -         |
+| value        | 选中项的值         | _string[] \| number[]_ | -         |
-| value        | 选中项的值           | `string[] | number[]` | -         |
+| options      | 可选项数据源       | _Option[]_             | `[]`      |
-| options      | 可选项数据源         | _Option[]_            | `[]`      |
+| placeholder  | 未选中时的提示文案 | _string_               | `请选择`  |
-| placeholder  | 未选中时的提示文案   | _string_              | `请选择`  |
+| active-color | 选中状态的高亮颜色 | _string_               | `#ee0a24` |
-| confirm-text | 确认按钮文字         | _string_              | `确认`    |
+| closeable    | 是否显示关闭图标   | _boolean_              | `true`    |
-| active-color | 选中状态的高亮颜色   | _string_              | `#ee0a24` |
 
 ### Events
 
@@ -54,7 +55,6 @@ export default {
 
 ### Slots
 
-| 名称         | 说明           |
+| 名称  | 说明           |
-| ------------ | -------------- |
+| ----- | -------------- |
-| title        | 自定义顶部标题 |
+| title | 自定义顶部标题 |
-| confirm-text | 自定义确认按钮 |

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',
+          },
+        ],
+      },
+    ],
+  },
+];

src/cascader/demo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <demo-section>
-    <demo-block :title="t('basicUsage')">
+    <demo-block card :title="t('basicUsage')">
       <van-field
         is-link
         readonly
@@ -8,17 +8,22 @@
         :placeholder="t('selectArea')"
         @click="showBase = true"
       />
-      <van-cascader :show.sync="showBase" :title="t('selectArea')" />
+      <van-popup v-model="showBase" round position="bottom">
+        <van-cascader :title="t('selectArea')" :options="t('options')" />
+      </van-popup>
     </demo-block>
   </demo-section>
 </template>
 
 <script>
+import zhCNOptions from './area';
+
 export default {
   i18n: {
     'zh-CN': {
       area: '地区',
       selectArea: '请选择地区',
+      options: zhCNOptions,
     },
     'en-US': {
       area: 'Area',

src/cascader/index.js

@@ -1,55 +1,92 @@
 import { createNamespace } from '../utils';
-import Popup from '../popup';
+import Tab from '../tab';
+import Tabs from '../tabs';
 
 const [createComponent, bem] = createNamespace('cascader');
 
 export default createComponent({
   props: {
-    show: Boolean,
     value: Array,
     title: String,
     options: Array,
     placeholder: String,
-    confirmText: String,
     activeColor: String,
+    closeable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      tabs: [],
+      activeTab: 0,
+    };
+  },
+
+  watch: {
+    options() {
+      // reset options and tab
+    },
+
+    value() {
+      // reset options and tab
+    },
+  },
+
+  created() {
+    this.init();
   },
 
   methods: {
-    toggle(val) {
+    init() {
-      this.$emit('update:show', val);
+      if (this.value) {
-    },
+        //
-
+      } else {
-    confirm() {
+        this.tabs = [
-      this.toggle(false);
+          {
+            title: this.placeholder || this.t('placeholder'),
+            options: this.options,
+          },
+        ];
+      }
     },
 
     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() {},
+    genTabs() {
+      return (
+        <Tabs class={bem('tabs')}>
+          {this.tabs.map((item) => (
+            <Tab title={item.title}>{this.genOptions(item.options)}</Tab>
+          ))}
+        </Tabs>
+      );
+    },
+
+    genOptions(options) {
+      return (
+        <ul class={bem('options')}>
+          {options.map((option) => (
+            <li class={bem('option')}>{option.text}</li>
+          ))}
+        </ul>
+      );
+    },
   },
 
   render() {
     return (
-      <Popup
+      <div class={bem()}>
-        round
-        value={this.show}
-        class={bem()}
-        position="bottom"
-        onInput={this.toggle}
-      >
         {this.genHeader()}
-        {this.genTab()}
+        {this.genTabs()}
-      </Popup>
+      </div>
     );
   },
 });

src/cascader/index.less

@@ -10,24 +10,40 @@
   }
 
   &__title {
-    font-size: @cascader-title-font-size;
     font-weight: @font-weight-bold;
+    font-size: @cascader-title-font-size;
     line-height: @cascader-title-line-height;
   }
 
-  &__confirm {
+  &__tabs {
-    height: 100%;
+    .van-tab {
-    // expand click area
+      flex: none;
-    padding: 0 @padding-md;
+      padding: 0 10px;
-    margin-right: -@padding-md;
-    color: @cascader-confirm-color;
-    font-size: @cascader-confirm-font-size;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
 
-    &:active {
+      &--active {
-      opacity: @active-opacity;
+        color: #969799;
+      }
+    }
+
+    &.van-tabs--line .van-tabs__wrap {
+      height: 48px;
+      padding: 0 6px;
     }
   }
+
+  &__option {
+    padding: 10px 16px;
+    font-size: 14px;
+    line-height: 20px;
+
+    &:active {
+      background-color: @active-color;
+    }
+  }
+
+  &__options {
+    box-sizing: border-box;
+    height: 384px;
+    padding-top: 6px;
+  }
 }

src/locale/lang/zh-CN.ts

@@ -22,6 +22,9 @@ export default {
     monthTitle: (year: number, month: number) => `${year}年${month}月`,
     rangePrompt: (maxRange: number) => `选择天数不能超过 ${maxRange} 天`,
   },
+  vanCascader: {
+    placeholder: '请选择',
+  },
   vanContactCard: {
     addText: '添加联系人',
   },

src/style/var.less

@@ -205,8 +205,6 @@
 @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;