feat: update cascader

antdv-demo

@@ -1 +1 @@
-Subproject commit c18fda17a11855f340d0f74de1d2f7b8ef591888
+Subproject commit 26019de237561b0d68e22a4e46537ee8e2e6f0fe

components/_util/props-util.js

@@ -124,7 +124,7 @@ const getSlotOptions = ele => {
   return componentOptions ? componentOptions.Ctor.options || {} : {};
 };
 const findDOMNode = instance => {
-  let node = instance.$el;
+  let node = instance.$el || instance;
   while (node && !node.tagName) {
     node = node.nextSibling;
   }
@@ -271,7 +271,7 @@ const getKey = ele => {
   return key;
 };
 
-export function getEvents(ele, on = true) {
+export function getEvents(ele = {}, on = true) {
   let props = {};
   if (ele.$) {
     props = { ...props, ...ele.$attrs };

components/cascader/index.jsx

@@ -12,13 +12,12 @@ import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import RedoOutlined from '@ant-design/icons-vue/RedoOutlined';
 import {
   hasProp,
-  filterEmpty,
   getOptionProps,
-  getComponentFromProp,
   isValidElement,
   getComponent,
   splitAttrs,
   findDOMNode,
+  getSlot,
 } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { cloneElement } from '../_util/vnode';
@@ -279,7 +278,7 @@ const Cascader = {
     getLabel() {
       const { options } = this;
       const names = getFilledFieldNames(this.$props);
-      const displayRender = getComponent(this, 'displayRender') || defaultDisplayRender;
+      const displayRender = getComponent(this, 'displayRender', {}, false) || defaultDisplayRender;
       const value = this.sValue;
       const unwrappedValue = Array.isArray(value[0]) ? value[0] : value;
       const selectedOptions = arrayTreeFilter(
@@ -374,10 +373,10 @@ const Cascader = {
   },
 
   render() {
-    const { $slots, sPopupVisible, inputValue, configProvider, localeData } = this;
+    const { sPopupVisible, inputValue, configProvider, localeData } = this;
     const { sValue: value, inputFocused } = this.$data;
     const props = getOptionProps(this);
-    let suffixIcon = getComponentFromProp(this, 'suffixIcon');
+    let suffixIcon = getComponent(this, 'suffixIcon');
     suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
     const { getPopupContainer: getContextPopupContainer } = configProvider;
     const {
@@ -494,7 +493,7 @@ const Cascader = {
       onKeydown: this.handleKeyDown,
       onChange: showSearch ? this.handleInputChange : noop,
     };
-    const children = filterEmpty($slots.default);
+    const children = getSlot(this);
     const inputIcon = (suffixIcon &&
       (isValidElement(suffixIcon) ? (
         cloneElement(suffixIcon, {
@@ -544,9 +543,4 @@ const Cascader = {
   },
 };
 
-/* istanbul ignore next */
-Cascader.install = function(app) {
-  app.component(Cascader.name, Cascader);
-};
-
 export default Cascader;

components/vc-cascader/Cascader.jsx

@@ -1,4 +1,4 @@
-import { getComponent, getListeners } from '../_util/props-util';
+import { getComponent, getSlot } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
 import Trigger from '../vc-trigger';
 import Menus from './Menus';
@@ -92,7 +92,7 @@ export default {
     this.children = undefined;
     // warning(!('filedNames' in props),
     //   '`filedNames` of Cascader is a typo usage and deprecated, please use `fieldNames` instead.');
-
+    this.defaultFieldNames = { label: 'label', value: 'value', children: 'children' };
     return {
       sPopupVisible: popupVisible,
       sActiveValue: initialValue,
@@ -327,7 +327,6 @@ export default {
       handlePopupVisibleChange,
       handleKeyDown,
     } = this;
-    const listeners = getListeners(this);
     const {
       prefixCls,
       transitionName,
@@ -353,7 +352,6 @@ export default {
         visible: sPopupVisible,
         loadingIcon,
         expandIcon,
-        ...listeners,
         onSelect: handleMenuSelect,
         onItemDoubleClick: this.handleItemDoubleClick,
       };
@@ -376,7 +374,8 @@ export default {
       onPopupVisibleChange: handlePopupVisibleChange,
       ref: this.saveTrigger,
     };
-    const children = this.children;
+    const children = getSlot(this);
+    this.children = children;
     return (
       <Trigger {...triggerProps}>
         {children &&

components/vc-cascader/Menus.jsx

@@ -1,4 +1,4 @@
-import { getComponent } from '../_util/props-util';
+import { getComponent, findDOMNode } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
 import arrayTreeFilter from 'array-tree-filter';
 import BaseMixin from '../_util/BaseMixin';
@@ -6,6 +6,7 @@ import BaseMixin from '../_util/BaseMixin';
 export default {
   name: 'CascaderMenus',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: {
     value: PropTypes.array.def([]),
     activeValue: PropTypes.array.def([]),
@@ -55,16 +56,9 @@ export default {
         this.__emit('itemDoubleClick', option, menuIndex, e);
       };
       const key = option[this.getFieldName('value')];
-      const expandProps = {
-        attrs: {
-          role: 'menuitem',
-        },
-        on: {
-          click: onSelect,
-          dblclick: onItemDoubleClick,
-          mousedown: e => e.preventDefault(),
-        },
-        key: Array.isArray(key) ? key.join('__ant__') : key,
+      let expandProps = {
+        onClick: onSelect,
+        onDblclick: onItemDoubleClick,
       };
       let menuItemCls = `${prefixCls}-menu-item`;
       let expandIconNode = null;
@@ -77,15 +71,15 @@ export default {
         }
       }
       if (expandTrigger === 'hover' && (hasChildren || option.isLeaf === false)) {
-        expandProps.on = {
-          mouseenter: this.delayOnSelect.bind(this, onSelect),
-          mouseleave: this.delayOnSelect.bind(this),
-          click: onSelect,
+        expandProps = {
+          onMouseenter: this.delayOnSelect.bind(this, onSelect),
+          onMouseleave: this.delayOnSelect.bind(this),
+          onClick: onSelect,
         };
       }
       if (this.isActiveOption(option, menuIndex)) {
         menuItemCls += ` ${prefixCls}-menu-item-active`;
-        expandProps.ref = this.getMenuItemRef(menuIndex);
+        expandProps.ref = this.saveMenuItem(menuIndex);
       }
       if (option.disabled) {
         menuItemCls += ` ${prefixCls}-menu-item-disabled`;
@@ -101,10 +95,15 @@ export default {
       } else if (typeof option[this.getFieldName('label')] === 'string') {
         title = option[this.getFieldName('label')];
       }
-      expandProps.attrs.title = title;
-      expandProps.class = menuItemCls;
       return (
-        <li {...expandProps}>
+        <li
+          key={Array.isArray(key) ? key.join('__ant__') : key}
+          class={menuItemCls}
+          title={title}
+          {...expandProps}
+          role="menuitem"
+          onMousedown={e => e.preventDefault()}
+        >
           {option[this.getFieldName('label')]}
           {expandIconNode}
           {loadingIconNode}
@@ -148,9 +147,9 @@ export default {
       // scroll into view
       const optionsLength = this.getShowOptions().length;
       for (let i = 0; i < optionsLength; i++) {
-        const itemComponent = this.$refs[`menuItems_${i}`];
+        const itemComponent = this.menuItems[i];
         if (itemComponent) {
-          const target = itemComponent;
+          const target = findDOMNode(itemComponent);
           target.parentNode.scrollTop = target.offsetTop;
         }
       }
@@ -160,9 +159,10 @@ export default {
       const { activeValue = [] } = this;
       return activeValue[menuIndex] === option[this.getFieldName('value')];
     },
-
-    getMenuItemRef(index) {
-      return `menuItems_${index}`;
+    saveMenuItem(index) {
+      return node => {
+        this.menuItems[index] = node;
+      };
     },
   },
 

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/auto-complete/demo/index';
+import demo from '../antdv-demo/docs/cascader/demo/index';
 
 export default {
   components: {

examples/index.js

@@ -1,5 +1,5 @@
 import '@babel/polyfill';
-import { createApp } from 'vue';
+import { createApp, version } from 'vue';
 import App from './App.vue';
 import {
   Badge,
@@ -21,12 +21,15 @@ import {
   FormModel,
   Switch,
   Checkbox,
+  Cascader,
   notification,
   message,
 } from 'ant-design-vue';
 
 import 'ant-design-vue/style.js';
 
+// eslint-disable-next-line no-console
+console.log('Vue version: ', version);
 const basic = {
   render() {
     return this.$slots?.default();
@@ -60,4 +63,5 @@ app
   .use(InputNumber)
   .use(AutoComplete)
   .use(FormModel)
+  .use(Cascader)
   .mount('#app');

package.json

@@ -152,7 +152,7 @@
     "terser-webpack-plugin": "^3.0.3",
     "through2": "^3.0.0",
     "url-loader": "^3.0.0",
-    "vue": "^3.0.0-beta.18",
+    "vue": "^3.0.0-beta.19",
     "vue-antd-md-loader": "^1.1.0",
     "vue-clipboard2": "0.3.1",
     "vue-draggable-resizable": "^2.1.0",