add cascader en docs

examples/docs/en-US/cascader.md

@@ -1 +1,487 @@
-## 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',
+            }],
+          }],
+        }],
+        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']
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
+      }
+    }
+  };
+</script>
+
+<style>
+  .demo-cascader {
+    .el-cascader {
+      width: 222px;
+    }
+  }
+  .demo-cascader-size {
+    .el-cascader {
+      vertical-align: top;
+      margin-right: 15px;
+    }
+  }
+</style>
+
+## Cascader
+
+It's used to select from a set of associated data set. Such as province/city/district, company level, and categories.
+
+### Basic usage
+
+:::demo
+```html
+<el-cascader
+  placeholder="Please select"
+  :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>
+```
+:::
+
+### Disabled option
+
+:::demo
+```html
+<el-cascader
+  placeholder="Please select"
+  :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>
+```
+:::
+
+### Default Value
+
+:::demo default value is assigned by an array type value.
+```html
+<el-cascader
+  placeholder="Please select"
+  :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>
+```
+:::
+
+### Size
+
+:::demo
+```html
+<div class="demo-cascader-size">
+  <el-cascader
+    placeholder="Please select"
+    :options="options"
+    size="large"
+  ></el-cascader>
+  <el-cascader
+    placeholder="Please select"
+    :options="options"
+  ></el-cascader>
+  <el-cascader
+    placeholder="Please select"
+    :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>
+```
+:::
+
+### Hover to expand
+
+Hover to expand the next level options, click to select option.
+
+:::demo
+```html
+<el-cascader
+  placeholder="Please select"
+  :options="options"
+  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>
+```
+:::
+
+### Change on select
+
+Allow only select parent options.
+
+:::demo
+```html
+<el-cascader
+  placeholder="Please select"
+  :options="options"
+  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>
+```
+:::
+
+### Search
+
+Search and select options directly.
+
+:::demo
+```html
+<el-cascader
+  placeholder="Please select"
+  :options="options"
+  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
+| Attribute | Description         | Type    | Options       | Default|
+|---------- |-------------------- |---------|-------------  |-------- |
+| options   | data source of the options | array  |       —        |     —    |
+| value | selected value   | array | — |     —    |
+| popup-class | className of popup overlay   | string |      —         |     —    |
+| placeholder | input placeholder | string    |      —         |     —    |
+| disabled  | 是否禁用    | boolean   |  — | false   |
+| allowClear  | whether allow clear    | boolean   |  — | false   |
+| expand-trigger  | trigger mode of expandind the current item | string | click / hover | 'click'   |
+| showSearch  | whether the options can be searched | boolean | — | — |
+| size  | size | string | large / small / mini | — |
+
+### Events
+| Event Name | Description | Parameters |
+|---------- |-------- |---------- |
+| change  | triggers when the binding value changes | value |

examples/docs/zh-CN/cascader.md

@@ -152,7 +152,9 @@
 ```
 :::
 
-### 禁用值
+### 禁用选项
+
+通过在数据源中设置 `disabled` 字段来声明该选项时禁用的
 
 :::demo
 ```html

examples/nav.config.json

@@ -76,6 +76,10 @@
               "path": "/select",
               "title": "Select 选择器"
             },
+            {
+              "path": "/cascader",
+              "title": "Cascader 级联选择"
+            },
             {
               "path": "/switch",
               "title": "Switch 开关"
@@ -215,10 +219,6 @@
             {
               "path": "/collapse",
               "title": "Collapse 折叠面板"
-            },
-            {
-              "path": "/cascader",
-              "title": "Cascader 级联选择"
             }
           ]
         }
@@ -302,6 +302,10 @@
               "path": "/select",
               "title": "Select"
             },
+            {
+              "path": "/cascader",
+              "title": "Cascader"
+            },
             {
               "path": "/switch",
               "title": "Switch"
@@ -441,10 +445,6 @@
             {
               "path": "/collapse",
               "title": "Collapse"
-            },
-            {
-              "path": "/cascader",
-              "title": "Cascader"
             }
           ]
         }

packages/cascader/src/main.vue

@@ -2,10 +2,13 @@
   <span
     class="el-cascader"
     :class="[
-      { 'is-opened': menuVisible },
+      {
+        'is-opened': menuVisible,
+        'is-disabled': disabled
+      },
       size ? 'el-cascader--' + size : ''
     ]"
-    @click="menuVisible = !menuVisible"
+    @click="handleClick"
     @mouseenter="inputHover = true"
     @mouseleave="inputHover = false"
     ref="reference"
@@ -18,6 +21,7 @@
       @change="handleInputChange"
       :validate-event="false"
       :size="size"
+      :disabled="disabled"
     >
       <template slot="icon">
         <i
@@ -209,6 +213,11 @@ export default {
     },
     handleClickoutside() {
       this.menuVisible = false;
+    },
+    handleClick() {
+      if (!this.disabled) {
+        this.menuVisible = !this.menuVisible;
+      }
     }
   }
 };