소스 검색

Cascader: Add before-filter hook

Liril 8 년 전
부모
커밋
fd7342bde6
5개의 변경된 파일31개의 추가작업 그리고 4개의 파일을 삭제
  1. 3 2
      examples/docs/en-US/cascader.md
  2. 2 1
      examples/docs/zh-CN/cascader.md
  3. 24 1
      packages/cascader/src/main.vue
  4. 1 0
      src/locale/lang/en.js
  5. 1 0
      src/locale/lang/zh-CN.js

+ 3 - 2
examples/docs/en-US/cascader.md

@@ -1380,7 +1380,7 @@ Load child options when their parent option is clicked or hovered over.
         }
       };
     },
-    
+
     methods: {
       handleItemChange(val) {
         console.log('active item:', val);
@@ -1656,9 +1656,10 @@ Search and select options with a keyword.
 | value     | specify which key of option object is used as the option's value | string | — | — |
 | children  | specify which key of option object is used as the option's child options | string | — | — |
 | disabled  | specify which key of option object indicates if the option is disabled | string | — | — |
+| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` or a `Promise` is returned, filtering will be aborted | function(value) | — | — |
 
 ### Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
 | change  | triggers when the binding value changes | value |
-| active-item-change | triggers when active option changes, only works when `change-on-select` is `false` | an array of active options |
+| active-item-change | triggers when active option changes, only works when `change-on-select` is `false` | an array of active options |

+ 2 - 1
examples/docs/zh-CN/cascader.md

@@ -1687,9 +1687,10 @@
 | label    | 指定选项标签为选项对象的某个属性值 | string | — | — |
 | children | 指定选项的子选项为选项对象的某个属性值 | string | — | — |
 | disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | — |
+| before-filter | 可选参数, 筛选之前的钩子,参数为输入的值,若返回 false 或者 Promise 则停止筛选。 | function(value) | — | — |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change | 当绑定值变化时触发的事件 | 当前值 |
-| active-item-change | 当父级选项变化时触发的事件,仅在 `change-on-select` 为 `false` 时可用 | 各父级选项组成的数组 |
+| active-item-change | 当父级选项变化时触发的事件,仅在 `change-on-select` 为 `false` 时可用 | 各父级选项组成的数组 |

+ 24 - 1
packages/cascader/src/main.vue

@@ -139,6 +139,10 @@ export default {
     debounce: {
       type: Number,
       default: 300
+    },
+    beforeFilter: {
+      type: Function,
+      default: null
     }
   },
 
@@ -328,7 +332,26 @@ export default {
 
   created() {
     this.debouncedInputChange = debounce(this.debounce, value => {
-      this.handleInputChange(value);
+      const before = this.beforeFilter(value);
+
+      if (before && before.then) {
+        this.menu.options = [{
+          __IS__FLAT__OPTIONS: true,
+          label: this.t('el.cascader.loading'),
+          value: '',
+          disabled: true
+        }];
+        before
+          .then(() => {
+            this.$nextTick(() => {
+              this.handleInputChange(value);
+            });
+          });
+      } else if (before !== false) {
+        this.$nextTick(() => {
+          this.handleInputChange(value);
+        });
+      }
     });
   },
 

+ 1 - 0
src/locale/lang/en.js

@@ -62,6 +62,7 @@ export default {
     },
     cascader: {
       noMatch: 'No matching data',
+      loading: 'Loading',
       placeholder: 'Select'
     },
     pagination: {

+ 1 - 0
src/locale/lang/zh-CN.js

@@ -62,6 +62,7 @@ export default {
     },
     cascader: {
       noMatch: '无匹配数据',
+      loading: '加载中',
       placeholder: '请选择'
     },
     pagination: {