add size docs

examples/docs/zh-CN/cascader.md

@@ -81,6 +81,12 @@
       width: 222px;
     }
   }
+  .demo-cascader-size {
+    .el-cascader {
+      vertical-align: top;
+      margin-right: 15px;
+    }
+  }
 </style>
 
 ## 级联选择
@@ -247,6 +253,67 @@
 ```
 :::
 
+### 尺寸
+
+:::demo 提供三种尺寸的级联选择器
+```html
+<div class="demo-cascader-size">
+  <el-cascader
+    placeholder="请选择"
+    :options="options"
+    size="large"
+  ></el-cascader>
+  <el-cascader
+    placeholder="请选择"
+    :options="options"
+  ></el-cascader>
+  <el-cascader
+    placeholder="请选择"
+    :options="options"
+    size="small"
+  ></el-cascader>
+</div>
+<script>
+  module.exports = {
+    data() {
+      return {
+        options: [{
+          value: 'zhejiang',
+          label: 'Zhejiang',
+          children: [{
+            value: 'hangzhou',
+            label: 'Hangzhou',
+            children: [{
+              value: 'xihu',
+              label: 'West Lake',
+            }],
+          }, {
+            value: 'ningbo',
+            label: 'NingBo',
+            children: [{
+              value: 'jiangbei',
+              label: 'Jiang Bei',
+            }],
+          }],
+        }, {
+          value: 'jiangsu',
+          label: 'Jiangsu',
+          children: [{
+            value: 'nanjing',
+            label: 'Nanjing',
+            children: [{
+              value: 'zhonghuamen',
+              label: 'Zhong Hua Men',
+            }],
+          }],
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### 移入展开
 
 在鼠标移入时就展开下级菜单，完成选择仍需要进行点击。

packages/cascader/src/main.vue

@@ -1,9 +1,10 @@
 <template>
   <span
     class="el-cascader"
-    :class="{
+    :class="[
-      'is-opened': menuVisible
+      { 'is-opened': menuVisible },
-    }"
+      size ? 'el-cascader--' + size : ''
+    ]"
     @click="menuVisible = !menuVisible"
     @mouseenter="inputHover = true"
     @mouseleave="inputHover = false"

packages/theme-default/src/cascader.css

@@ -33,8 +33,8 @@
       position: absolute;
       left: 0;
       top: 0;
-      height: var(--input-height);
+      height: 100%;
-      line-height: @height;
+      line-height: 34px;
       padding: 0 15px 0 10px;
       color: var(--input-color);
       width: 100%;
@@ -44,6 +44,21 @@
       box-sizing: border-box;
       cursor: pointer;
     }
+
+    @m large {
+      font-size: var(--input-large-font-size);
+
+      .el-cascader__label {
+        line-height: calc(var(--input-large-height) - 2);
+      }
+    }
+    @m small {
+      font-size: var(--input-small-font-size);
+
+      .el-cascader__label {
+        line-height: calc(var(--input-small-height) - 2);
+      }
+    }
   }
 
   @b cascader-menus {