feat: update cascader
parent
e191921413
commit
97aeaf74b4
|
@ -1 +1 @@
|
||||||
Subproject commit c18fda17a11855f340d0f74de1d2f7b8ef591888
|
Subproject commit 26019de237561b0d68e22a4e46537ee8e2e6f0fe
|
|
@ -124,7 +124,7 @@ const getSlotOptions = ele => {
|
||||||
return componentOptions ? componentOptions.Ctor.options || {} : {};
|
return componentOptions ? componentOptions.Ctor.options || {} : {};
|
||||||
};
|
};
|
||||||
const findDOMNode = instance => {
|
const findDOMNode = instance => {
|
||||||
let node = instance.$el;
|
let node = instance.$el || instance;
|
||||||
while (node && !node.tagName) {
|
while (node && !node.tagName) {
|
||||||
node = node.nextSibling;
|
node = node.nextSibling;
|
||||||
}
|
}
|
||||||
|
@ -271,7 +271,7 @@ const getKey = ele => {
|
||||||
return key;
|
return key;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function getEvents(ele, on = true) {
|
export function getEvents(ele = {}, on = true) {
|
||||||
let props = {};
|
let props = {};
|
||||||
if (ele.$) {
|
if (ele.$) {
|
||||||
props = { ...props, ...ele.$attrs };
|
props = { ...props, ...ele.$attrs };
|
||||||
|
|
|
@ -12,13 +12,12 @@ import RightOutlined from '@ant-design/icons-vue/RightOutlined';
|
||||||
import RedoOutlined from '@ant-design/icons-vue/RedoOutlined';
|
import RedoOutlined from '@ant-design/icons-vue/RedoOutlined';
|
||||||
import {
|
import {
|
||||||
hasProp,
|
hasProp,
|
||||||
filterEmpty,
|
|
||||||
getOptionProps,
|
getOptionProps,
|
||||||
getComponentFromProp,
|
|
||||||
isValidElement,
|
isValidElement,
|
||||||
getComponent,
|
getComponent,
|
||||||
splitAttrs,
|
splitAttrs,
|
||||||
findDOMNode,
|
findDOMNode,
|
||||||
|
getSlot,
|
||||||
} from '../_util/props-util';
|
} from '../_util/props-util';
|
||||||
import BaseMixin from '../_util/BaseMixin';
|
import BaseMixin from '../_util/BaseMixin';
|
||||||
import { cloneElement } from '../_util/vnode';
|
import { cloneElement } from '../_util/vnode';
|
||||||
|
@ -279,7 +278,7 @@ const Cascader = {
|
||||||
getLabel() {
|
getLabel() {
|
||||||
const { options } = this;
|
const { options } = this;
|
||||||
const names = getFilledFieldNames(this.$props);
|
const names = getFilledFieldNames(this.$props);
|
||||||
const displayRender = getComponent(this, 'displayRender') || defaultDisplayRender;
|
const displayRender = getComponent(this, 'displayRender', {}, false) || defaultDisplayRender;
|
||||||
const value = this.sValue;
|
const value = this.sValue;
|
||||||
const unwrappedValue = Array.isArray(value[0]) ? value[0] : value;
|
const unwrappedValue = Array.isArray(value[0]) ? value[0] : value;
|
||||||
const selectedOptions = arrayTreeFilter(
|
const selectedOptions = arrayTreeFilter(
|
||||||
|
@ -374,10 +373,10 @@ const Cascader = {
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { $slots, sPopupVisible, inputValue, configProvider, localeData } = this;
|
const { sPopupVisible, inputValue, configProvider, localeData } = this;
|
||||||
const { sValue: value, inputFocused } = this.$data;
|
const { sValue: value, inputFocused } = this.$data;
|
||||||
const props = getOptionProps(this);
|
const props = getOptionProps(this);
|
||||||
let suffixIcon = getComponentFromProp(this, 'suffixIcon');
|
let suffixIcon = getComponent(this, 'suffixIcon');
|
||||||
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
||||||
const { getPopupContainer: getContextPopupContainer } = configProvider;
|
const { getPopupContainer: getContextPopupContainer } = configProvider;
|
||||||
const {
|
const {
|
||||||
|
@ -494,7 +493,7 @@ const Cascader = {
|
||||||
onKeydown: this.handleKeyDown,
|
onKeydown: this.handleKeyDown,
|
||||||
onChange: showSearch ? this.handleInputChange : noop,
|
onChange: showSearch ? this.handleInputChange : noop,
|
||||||
};
|
};
|
||||||
const children = filterEmpty($slots.default);
|
const children = getSlot(this);
|
||||||
const inputIcon = (suffixIcon &&
|
const inputIcon = (suffixIcon &&
|
||||||
(isValidElement(suffixIcon) ? (
|
(isValidElement(suffixIcon) ? (
|
||||||
cloneElement(suffixIcon, {
|
cloneElement(suffixIcon, {
|
||||||
|
@ -544,9 +543,4 @@ const Cascader = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
/* istanbul ignore next */
|
|
||||||
Cascader.install = function(app) {
|
|
||||||
app.component(Cascader.name, Cascader);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Cascader;
|
export default Cascader;
|
||||||
|
|
|
@ -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 PropTypes from '../_util/vue-types';
|
||||||
import Trigger from '../vc-trigger';
|
import Trigger from '../vc-trigger';
|
||||||
import Menus from './Menus';
|
import Menus from './Menus';
|
||||||
|
@ -92,7 +92,7 @@ export default {
|
||||||
this.children = undefined;
|
this.children = undefined;
|
||||||
// warning(!('filedNames' in props),
|
// warning(!('filedNames' in props),
|
||||||
// '`filedNames` of Cascader is a typo usage and deprecated, please use `fieldNames` instead.');
|
// '`filedNames` of Cascader is a typo usage and deprecated, please use `fieldNames` instead.');
|
||||||
|
this.defaultFieldNames = { label: 'label', value: 'value', children: 'children' };
|
||||||
return {
|
return {
|
||||||
sPopupVisible: popupVisible,
|
sPopupVisible: popupVisible,
|
||||||
sActiveValue: initialValue,
|
sActiveValue: initialValue,
|
||||||
|
@ -327,7 +327,6 @@ export default {
|
||||||
handlePopupVisibleChange,
|
handlePopupVisibleChange,
|
||||||
handleKeyDown,
|
handleKeyDown,
|
||||||
} = this;
|
} = this;
|
||||||
const listeners = getListeners(this);
|
|
||||||
const {
|
const {
|
||||||
prefixCls,
|
prefixCls,
|
||||||
transitionName,
|
transitionName,
|
||||||
|
@ -353,7 +352,6 @@ export default {
|
||||||
visible: sPopupVisible,
|
visible: sPopupVisible,
|
||||||
loadingIcon,
|
loadingIcon,
|
||||||
expandIcon,
|
expandIcon,
|
||||||
...listeners,
|
|
||||||
onSelect: handleMenuSelect,
|
onSelect: handleMenuSelect,
|
||||||
onItemDoubleClick: this.handleItemDoubleClick,
|
onItemDoubleClick: this.handleItemDoubleClick,
|
||||||
};
|
};
|
||||||
|
@ -376,7 +374,8 @@ export default {
|
||||||
onPopupVisibleChange: handlePopupVisibleChange,
|
onPopupVisibleChange: handlePopupVisibleChange,
|
||||||
ref: this.saveTrigger,
|
ref: this.saveTrigger,
|
||||||
};
|
};
|
||||||
const children = this.children;
|
const children = getSlot(this);
|
||||||
|
this.children = children;
|
||||||
return (
|
return (
|
||||||
<Trigger {...triggerProps}>
|
<Trigger {...triggerProps}>
|
||||||
{children &&
|
{children &&
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { getComponent } from '../_util/props-util';
|
import { getComponent, findDOMNode } from '../_util/props-util';
|
||||||
import PropTypes from '../_util/vue-types';
|
import PropTypes from '../_util/vue-types';
|
||||||
import arrayTreeFilter from 'array-tree-filter';
|
import arrayTreeFilter from 'array-tree-filter';
|
||||||
import BaseMixin from '../_util/BaseMixin';
|
import BaseMixin from '../_util/BaseMixin';
|
||||||
|
@ -6,6 +6,7 @@ import BaseMixin from '../_util/BaseMixin';
|
||||||
export default {
|
export default {
|
||||||
name: 'CascaderMenus',
|
name: 'CascaderMenus',
|
||||||
mixins: [BaseMixin],
|
mixins: [BaseMixin],
|
||||||
|
inheritAttrs: false,
|
||||||
props: {
|
props: {
|
||||||
value: PropTypes.array.def([]),
|
value: PropTypes.array.def([]),
|
||||||
activeValue: PropTypes.array.def([]),
|
activeValue: PropTypes.array.def([]),
|
||||||
|
@ -55,16 +56,9 @@ export default {
|
||||||
this.__emit('itemDoubleClick', option, menuIndex, e);
|
this.__emit('itemDoubleClick', option, menuIndex, e);
|
||||||
};
|
};
|
||||||
const key = option[this.getFieldName('value')];
|
const key = option[this.getFieldName('value')];
|
||||||
const expandProps = {
|
let expandProps = {
|
||||||
attrs: {
|
onClick: onSelect,
|
||||||
role: 'menuitem',
|
onDblclick: onItemDoubleClick,
|
||||||
},
|
|
||||||
on: {
|
|
||||||
click: onSelect,
|
|
||||||
dblclick: onItemDoubleClick,
|
|
||||||
mousedown: e => e.preventDefault(),
|
|
||||||
},
|
|
||||||
key: Array.isArray(key) ? key.join('__ant__') : key,
|
|
||||||
};
|
};
|
||||||
let menuItemCls = `${prefixCls}-menu-item`;
|
let menuItemCls = `${prefixCls}-menu-item`;
|
||||||
let expandIconNode = null;
|
let expandIconNode = null;
|
||||||
|
@ -77,15 +71,15 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (expandTrigger === 'hover' && (hasChildren || option.isLeaf === false)) {
|
if (expandTrigger === 'hover' && (hasChildren || option.isLeaf === false)) {
|
||||||
expandProps.on = {
|
expandProps = {
|
||||||
mouseenter: this.delayOnSelect.bind(this, onSelect),
|
onMouseenter: this.delayOnSelect.bind(this, onSelect),
|
||||||
mouseleave: this.delayOnSelect.bind(this),
|
onMouseleave: this.delayOnSelect.bind(this),
|
||||||
click: onSelect,
|
onClick: onSelect,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
if (this.isActiveOption(option, menuIndex)) {
|
if (this.isActiveOption(option, menuIndex)) {
|
||||||
menuItemCls += ` ${prefixCls}-menu-item-active`;
|
menuItemCls += ` ${prefixCls}-menu-item-active`;
|
||||||
expandProps.ref = this.getMenuItemRef(menuIndex);
|
expandProps.ref = this.saveMenuItem(menuIndex);
|
||||||
}
|
}
|
||||||
if (option.disabled) {
|
if (option.disabled) {
|
||||||
menuItemCls += ` ${prefixCls}-menu-item-disabled`;
|
menuItemCls += ` ${prefixCls}-menu-item-disabled`;
|
||||||
|
@ -101,10 +95,15 @@ export default {
|
||||||
} else if (typeof option[this.getFieldName('label')] === 'string') {
|
} else if (typeof option[this.getFieldName('label')] === 'string') {
|
||||||
title = option[this.getFieldName('label')];
|
title = option[this.getFieldName('label')];
|
||||||
}
|
}
|
||||||
expandProps.attrs.title = title;
|
|
||||||
expandProps.class = menuItemCls;
|
|
||||||
return (
|
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')]}
|
{option[this.getFieldName('label')]}
|
||||||
{expandIconNode}
|
{expandIconNode}
|
||||||
{loadingIconNode}
|
{loadingIconNode}
|
||||||
|
@ -148,9 +147,9 @@ export default {
|
||||||
// scroll into view
|
// scroll into view
|
||||||
const optionsLength = this.getShowOptions().length;
|
const optionsLength = this.getShowOptions().length;
|
||||||
for (let i = 0; i < optionsLength; i++) {
|
for (let i = 0; i < optionsLength; i++) {
|
||||||
const itemComponent = this.$refs[`menuItems_${i}`];
|
const itemComponent = this.menuItems[i];
|
||||||
if (itemComponent) {
|
if (itemComponent) {
|
||||||
const target = itemComponent;
|
const target = findDOMNode(itemComponent);
|
||||||
target.parentNode.scrollTop = target.offsetTop;
|
target.parentNode.scrollTop = target.offsetTop;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -160,9 +159,10 @@ export default {
|
||||||
const { activeValue = [] } = this;
|
const { activeValue = [] } = this;
|
||||||
return activeValue[menuIndex] === option[this.getFieldName('value')];
|
return activeValue[menuIndex] === option[this.getFieldName('value')];
|
||||||
},
|
},
|
||||||
|
saveMenuItem(index) {
|
||||||
getMenuItemRef(index) {
|
return node => {
|
||||||
return `menuItems_${index}`;
|
this.menuItems[index] = node;
|
||||||
|
};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import demo from '../antdv-demo/docs/auto-complete/demo/index';
|
import demo from '../antdv-demo/docs/cascader/demo/index';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import '@babel/polyfill';
|
import '@babel/polyfill';
|
||||||
import { createApp } from 'vue';
|
import { createApp, version } from 'vue';
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import {
|
import {
|
||||||
Badge,
|
Badge,
|
||||||
|
@ -21,12 +21,15 @@ import {
|
||||||
FormModel,
|
FormModel,
|
||||||
Switch,
|
Switch,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
|
Cascader,
|
||||||
notification,
|
notification,
|
||||||
message,
|
message,
|
||||||
} from 'ant-design-vue';
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
import 'ant-design-vue/style.js';
|
import 'ant-design-vue/style.js';
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log('Vue version: ', version);
|
||||||
const basic = {
|
const basic = {
|
||||||
render() {
|
render() {
|
||||||
return this.$slots?.default();
|
return this.$slots?.default();
|
||||||
|
@ -60,4 +63,5 @@ app
|
||||||
.use(InputNumber)
|
.use(InputNumber)
|
||||||
.use(AutoComplete)
|
.use(AutoComplete)
|
||||||
.use(FormModel)
|
.use(FormModel)
|
||||||
|
.use(Cascader)
|
||||||
.mount('#app');
|
.mount('#app');
|
||||||
|
|
|
@ -152,7 +152,7 @@
|
||||||
"terser-webpack-plugin": "^3.0.3",
|
"terser-webpack-plugin": "^3.0.3",
|
||||||
"through2": "^3.0.0",
|
"through2": "^3.0.0",
|
||||||
"url-loader": "^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-antd-md-loader": "^1.1.0",
|
||||||
"vue-clipboard2": "0.3.1",
|
"vue-clipboard2": "0.3.1",
|
||||||
"vue-draggable-resizable": "^2.1.0",
|
"vue-draggable-resizable": "^2.1.0",
|
||||||
|
|
Loading…
Reference in New Issue