cascader add size & disabled

examples/docs/zh-CN/cascader.md

@@ -32,18 +32,57 @@
             }],
           }],
         }],
+        optionsWithDisabled: [{
+          value: 'zhejiang',
+          label: 'Zhejiang',
+          disabled: true,
+          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',
+            }],
+          }],
+        }],
         selectedOptions: [],
-        selectedOptions2: ['jiangsu', 'nanjing', 'zhonghuamen'],
-        selectedOptions3: [],
-        selectedOptions4: [],
-        selectedOptions5: []
+        selectedOptions2: ['jiangsu', 'nanjing', 'zhonghuamen']
       };
     },
     methods: {
+      handleChange(value) {
+        console.log(value);
+      }
     }
   };
 </script>
 
+<style>
+  .demo-cascader {
+    .el-cascader {
+      width: 222px;
+    }
+  }
+</style>
+
 ## 级联选择
 
 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
@@ -55,55 +94,329 @@
 :::demo
 ```html
 <el-cascader
+  placeholder="请选择"
   :options="options"
   v-model="selectedOptions"
+  @change="handleChange"
+></el-cascader>
+<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',
+            }],
+          }],
+        }],
+        selectedOptions: []
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 禁用值
+
+:::demo
+```html
+<el-cascader
+  placeholder="请选择"
+  :options="optionsWithDisabled"
 ></el-cascader>
+<script>
+  module.exports = {
+    data() {
+      return {
+        optionsWithDisabled: [{
+          value: 'zhejiang',
+          label: 'Zhejiang',
+          disabled: true,
+          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>
 ```
 :::
 
 ### 默认值
 
-:::demo
+:::demo 默认值通过数组的方式指定。
 ```html
 <el-cascader
+  placeholder="请选择"
   :options="options"
   v-model="selectedOptions2"
 ></el-cascader>
+<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',
+            }],
+          }],
+        }],
+        selectedOptions2: ['jiangsu', 'nanjing', 'zhonghuamen']
+      };
+    }
+  };
+</script>
 ```
 :::
 
 ### 移入展开
 
+在鼠标移入时就展开下级菜单，完成选择仍需要进行点击。
+
 :::demo
 ```html
 <el-cascader
+  placeholder="请选择"
   :options="options"
-  v-model="selectedOptions3"
   expand-trigger="hover"
 ></el-cascader>
+<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>
 ```
 :::
 
 ### 选择即改变
 
+该模式下允许只选中父级选项。
+
 :::demo
 ```html
 <el-cascader
+  placeholder="请选择"
   :options="options"
-  v-model="selectedOptions4"
   change-on-select
 ></el-cascader>
+<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>
 ```
 :::
 
 ### 可搜索
 
+可以直接搜索选项并选择。
+
 :::demo
 ```html
 <el-cascader
+  placeholder="请选择"
   :options="options"
-  v-model="selectedOptions5"
   show-search
 ></el-cascader>
+<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>
 ```
-:::
+:::
+
+### Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| options   | 可选项数据源 | array  |       —        |     —    |
+| value | 指定选中项   | array | — |     —    |
+| popup-class | 自定义浮层类名   | string |      —         |     —    |
+| placeholder | 输入框占位文本 | string    |      —         |     —    |
+| disabled  | 是否禁用    | boolean   |  — | false   |
+| allowClear  | 是否支持清除    | boolean   |  — | false   |
+| expand-trigger  | 次级菜单的展开方式 | string | click / hover | 'click'   |
+| showSearch  | 是否支持搜索选项 | boolean | — | — |
+| size  | 尺寸 | string | large / small / mini | — |
+
+### Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| change  | 当绑定值变化时触发的事件 | 当前值 |

examples/docs/zh-CN/select.md

@@ -215,7 +215,7 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value2: ''
+        value2: '选项2'
       }
     }
   }

packages/cascader/src/main.vue

@@ -12,9 +12,11 @@
   >
     <el-input
       :readonly="!showSearch"
-      :placeholder="placeholder"
+      :placeholder="displayValue ? undefined : placeholder"
       v-model="inputValue"
       @change="handleInputChange"
+      :validate-event="false"
+      :size="size"
     >
       <template slot="icon">
         <i
@@ -41,6 +43,7 @@ import ElCascaderMenu from './menu';
 import ElInput from 'element-ui/packages/input';
 import Popper from 'element-ui/src/utils/vue-popper';
 import Clickoutside from 'element-ui/src/utils/clickoutside';
+import emitter from 'element-ui/src/mixins/emitter';
 
 const popperMixin = {
   props: {
@@ -63,7 +66,7 @@ export default {
 
   directives: { Clickoutside },
 
-  mixins: [popperMixin],
+  mixins: [popperMixin, emitter],
 
   components: {
     ElInput
@@ -92,7 +95,8 @@ export default {
       type: String,
       default: 'click'
     },
-    showSearch: Boolean
+    showSearch: Boolean,
+    size: String
   },
 
   data() {
@@ -115,6 +119,7 @@ export default {
     },
     currentValue(value) {
       this.displayValue = value.join('/');
+      this.dispatch('ElFormItem', 'el.form.change', [value]);
     }
   },
 
@@ -125,12 +130,13 @@ export default {
         this.menu.options = this.options;
         this.menu.expandTrigger = this.expandTrigger;
         this.menu.changeOnSelect = this.changeOnSelect;
+        this.menu.popperClass = this.popperClass;
         this.popperElm = this.menu.$el;
       }
 
       this.menu.value = this.currentValue.slice(0);
       this.menu.visible = true;
-      this.menu.$on('change', this.handlePick);
+      this.menu.$on('pick', this.handlePick);
       this.updatePopper();
     },
     hideMenu() {
@@ -140,6 +146,7 @@ export default {
     handlePick(value, close = true) {
       this.currentValue = value;
       this.$emit('input', value);
+      this.$emit('change', value);
       if (close) {
         this.menuVisible = false;
       }
@@ -165,7 +172,7 @@ export default {
           };
         });
       } else {
-        return [{ label: 'notFoundContent', value: 'ANT_CASCADER_NOT_FOUND', disabled: true }];
+        return [{ label: 'not found content', value: '', disabled: true }];
       }
     },
     renderRenderFilteredOption(inputValue, optionsStack) {

packages/cascader/src/menu.vue

@@ -9,7 +9,8 @@
         activeValue: [],
         value: [],
         expandTrigger: 'click',
-        changeOnSelect: false
+        changeOnSelect: false,
+        popperClass: ''
       };
     },
 
@@ -66,7 +67,7 @@
         }
 
         if (this.changeOnSelect) {
-          this.$emit('change', this.activeValue, closeMenu);
+          this.$emit('pick', this.activeValue, closeMenu);
         }
       },
       expandItem(item, menuIndex) {
@@ -81,7 +82,7 @@
         this.selectItem(item, menuIndex);
 
         if (!item.children && !this.changeOnSelect) {
-          this.$emit('change', this.activeValue);
+          this.$emit('pick', this.activeValue);
         }
       }
     },
@@ -91,7 +92,8 @@
         activeValue,
         activeOptions,
         visible,
-        expandTrigger
+        expandTrigger,
+        popperClass
       } = this;
 
       const menus = this._l(activeOptions, (menu, index) => {
@@ -100,10 +102,12 @@
             on: {}
           };
 
-          if (expandTrigger === 'click' || !item.children) {
-            events.on['click'] = () => { this.handleItemClick(item, index); };
-          } else {
-            events.on['mouseenter'] = () => { this.expandItem(item, index); };
+          if (!item.disabled) {
+            if (expandTrigger === 'click' || !item.children) {
+              events.on['click'] = () => { this.handleItemClick(item, index); };
+            } else {
+              events.on['mouseenter'] = () => { this.expandItem(item, index); };
+            }
           }
 
           return (
@@ -111,7 +115,8 @@
               class={{
                 'el-cascader-menu__item': true,
                 'el-cascader-menu__item--extensible': item.children,
-                'is-active': item.value === activeValue[index]
+                'is-active': item.value === activeValue[index],
+                'is-disabled': item.disabled
               }}
               {...events}
             >
@@ -123,7 +128,7 @@
       });
       return (
         <transition name="el-zoom-in-top">
-          <div class="el-cascader-menus" v-show={visible}>
+          <div class={['el-cascader-menus', popperClass]} v-show={visible}>
             {menus}
           </div>
         </transition>

packages/theme-default/src/cascader.css

@@ -106,6 +106,7 @@
 
       @when disabled {
         color: var(--select-option-disabled-color);
+        background-color: var(--select-option-disabled-background);
         cursor: not-allowed;
 
         &:hover {

packages/theme-default/src/common/var.css

@@ -161,6 +161,7 @@
 
   --select-option-color: var(--link-color);
   --select-option-disabled-color: var(--color-extra-light-silver);
+  --select-option-disabled-background: var(--color-white);
   --select-option-height: 36px;
   --select-option-hover-background: var(--color-light-gray);
   --select-option-selected: var(--color-primary);