fix: menu
tanjinzhou
parent
5c425cec90
commit
82bb43bbe8
|
|
@ -1,4 +1,5 @@
|
|||
import { getOptionProps } from './props-util';
|
||||
import { isOn } from './util';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
|
|
@ -26,7 +27,9 @@ export default {
|
|||
const args = [].slice.call(arguments, 0);
|
||||
let eventName = args[0];
|
||||
// TODO: 后续统一改成onXxxx，不在运行时转，提升性能
|
||||
eventName = `on${eventName[0].toUpperCase()}${eventName.substring(1)}`;
|
||||
eventName = isOn(eventName)
|
||||
? eventName
|
||||
: `on${eventName[0].toUpperCase()}${eventName.substring(1)}`;
|
||||
const event = this.$props[eventName] || this.$attrs[eventName];
|
||||
if (args.length && event) {
|
||||
if (Array.isArray(event)) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
const createRef = fn => {
|
||||
const createRefHooks = fn => {
|
||||
return {
|
||||
onVnodeBeforeMount: vnode => {
|
||||
fn(vnode.component || vnode.el, vnode.key);
|
||||
|
|
@ -11,4 +11,4 @@ const createRef = fn => {
|
|||
},
|
||||
};
|
||||
};
|
||||
export default createRef;
|
||||
export default createRefHooks;
|
||||
|
|
|
|||
|
|
@ -93,6 +93,13 @@ const getSlotOptions = ele => {
|
|||
}
|
||||
return componentOptions ? componentOptions.Ctor.options || {} : {};
|
||||
};
|
||||
const findDOMNode = instance => {
|
||||
let node = instance.$el;
|
||||
while (!node.tagName) {
|
||||
node = node.nextSibling;
|
||||
}
|
||||
return node;
|
||||
};
|
||||
const getOptionProps = instance => {
|
||||
const res = {};
|
||||
if (instance.$ && instance.$.vnode) {
|
||||
|
|
@ -218,18 +225,16 @@ const getKey = ele => {
|
|||
return key;
|
||||
};
|
||||
|
||||
export function getEvents(child) {
|
||||
const { $attrs } = child;
|
||||
return splitAttrs($attrs).events;
|
||||
|
||||
// let events = {};
|
||||
// if (child.componentOptions && child.componentOptions.listeners) {
|
||||
// events = child.componentOptions.listeners;
|
||||
// } else if (child.data && child.data.on) {
|
||||
// events = child.data.on;
|
||||
// }
|
||||
// return { ...events };
|
||||
export function getEvents(ele, on = true) {
|
||||
let props = {};
|
||||
if (ele.$) {
|
||||
props = { ...props, ...ele.$attrs };
|
||||
} else {
|
||||
props = { ...props, ...ele.props };
|
||||
}
|
||||
return splitAttrs(props)[on ? 'onEvents' : 'events'];
|
||||
}
|
||||
|
||||
export function getEvent(child, event) {
|
||||
return child.props && child.props[event];
|
||||
}
|
||||
|
|
@ -347,5 +352,6 @@ export {
|
|||
getSlot,
|
||||
getAllProps,
|
||||
getAllChildren,
|
||||
findDOMNode,
|
||||
};
|
||||
export default hasProp;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { getOptionProps } from './props-util';
|
|||
function getDisplayName(WrappedComponent) {
|
||||
return WrappedComponent.name || 'Component';
|
||||
}
|
||||
let k = 1;
|
||||
export default function wrapWithConnect(WrappedComponent) {
|
||||
const tempProps = WrappedComponent.props || {};
|
||||
const methods = WrappedComponent.methods || {};
|
||||
|
|
@ -29,8 +30,7 @@ export default function wrapWithConnect(WrappedComponent) {
|
|||
const wrapProps = {
|
||||
...props,
|
||||
...$attrs,
|
||||
__propsSymbol__: Symbol(),
|
||||
componentWillReceiveProps: { ...props },
|
||||
__propsSymbol__: k++,
|
||||
ref: 'wrappedInstance',
|
||||
};
|
||||
return createVNode(WrappedComponent, wrapProps, $slots);
|
||||
|
|
|
|||
|
|
@ -187,7 +187,7 @@ export default {
|
|||
isValidElement(children) ? children : <span>{children}</span>,
|
||||
);
|
||||
const childCls = {
|
||||
[openClassName || `${prefixCls}-open`]: true,
|
||||
[openClassName || `${prefixCls}-open`]: sVisible,
|
||||
[child.props && child.props.class]: child.props && child.props.class,
|
||||
};
|
||||
const tooltipProps = {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import SubMenu from './SubMenu';
|
|||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { getWidth, setStyle, menuAllProps } from './util';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
import { getPropsData, getAllProps, getSlot } from '../_util/props-util';
|
||||
import { getPropsData, getAllProps, getSlot, findDOMNode } from '../_util/props-util';
|
||||
|
||||
const canUseDOM = !!(
|
||||
typeof window !== 'undefined' &&
|
||||
|
|
@ -44,7 +44,7 @@ const DOMWrap = {
|
|||
this.$nextTick(() => {
|
||||
this.setChildrenWidthAndResize();
|
||||
if (this.level === 1 && this.mode === 'horizontal') {
|
||||
const menuUl = this.$el;
|
||||
const menuUl = findDOMNode(this);
|
||||
if (!menuUl) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -92,7 +92,7 @@ const DOMWrap = {
|
|||
// get all valid menuItem nodes
|
||||
getMenuItemNodes() {
|
||||
const { prefixCls } = this.$props;
|
||||
const ul = this.$el;
|
||||
const ul = findDOMNode(this);
|
||||
if (!ul) {
|
||||
return [];
|
||||
}
|
||||
|
|
@ -156,7 +156,7 @@ const DOMWrap = {
|
|||
if (this.mode !== 'horizontal') {
|
||||
return;
|
||||
}
|
||||
const ul = this.$el;
|
||||
const ul = findDOMNode(this);
|
||||
|
||||
if (!ul) {
|
||||
return;
|
||||
|
|
@ -203,7 +203,7 @@ const DOMWrap = {
|
|||
return;
|
||||
}
|
||||
|
||||
const ul = this.$el;
|
||||
const ul = findDOMNode(this);
|
||||
if (!ul) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import BaseMixin from '../_util/BaseMixin';
|
|||
import scrollIntoView from 'dom-scroll-into-view';
|
||||
import { connect } from '../_util/store';
|
||||
import { noop, menuAllProps } from './util';
|
||||
import { getComponent, getSlot } from '../_util/props-util';
|
||||
import { getComponent, getSlot, findDOMNode } from '../_util/props-util';
|
||||
|
||||
const props = {
|
||||
attribute: PropTypes.object,
|
||||
|
|
@ -17,13 +17,7 @@ const props = {
|
|||
index: PropTypes.number,
|
||||
inlineIndent: PropTypes.number.def(24),
|
||||
level: PropTypes.number.def(1),
|
||||
mode: PropTypes.oneOf([
|
||||
'horizontal',
|
||||
'vertical',
|
||||
'vertical-left',
|
||||
'vertical-right',
|
||||
'inline',
|
||||
]).def('vertical'),
|
||||
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']),
|
||||
parentMenu: PropTypes.object,
|
||||
multiple: PropTypes.bool,
|
||||
value: PropTypes.any,
|
||||
|
|
@ -35,7 +29,7 @@ const props = {
|
|||
// clearSubMenuTimers: PropTypes.func.def(noop),
|
||||
};
|
||||
const MenuItem = {
|
||||
name: 'MenuItem',
|
||||
name: 'AMenuItem',
|
||||
inheritAttrs: false,
|
||||
props,
|
||||
mixins: [BaseMixin],
|
||||
|
|
@ -49,7 +43,7 @@ const MenuItem = {
|
|||
this.$nextTick(() => {
|
||||
const { active, parentMenu, eventKey } = this.$props;
|
||||
if (!this.prevActive && active && (!parentMenu || !parentMenu[`scrolled-${eventKey}`])) {
|
||||
scrollIntoView(this.$el, this.parentMenu.$el, {
|
||||
scrollIntoView(this.$refs.node, findDOMNode(this.parentMenu), {
|
||||
onlyScrollIfNeeded: true,
|
||||
});
|
||||
parentMenu[`scrolled-${eventKey}`] = true;
|
||||
|
|
@ -188,6 +182,7 @@ const MenuItem = {
|
|||
...props,
|
||||
...attrs,
|
||||
...mouseEvent,
|
||||
ref: 'node',
|
||||
};
|
||||
delete liProps.children;
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import { getComponent, getSlot } from '../_util/props-util';
|
||||
|
||||
// import { menuAllProps } from './util'
|
||||
import { menuAllProps } from './util';
|
||||
|
||||
const MenuItemGroup = {
|
||||
name: 'MenuItemGroup',
|
||||
|
|
@ -27,7 +26,8 @@ const MenuItemGroup = {
|
|||
const { class: cls = '', rootPrefixCls, title } = props;
|
||||
const titleClassName = `${rootPrefixCls}-item-group-title`;
|
||||
const listClassName = `${rootPrefixCls}-item-group-list`;
|
||||
// menuAllProps.props.forEach(key => delete props[key])
|
||||
menuAllProps.forEach(key => delete props[key]);
|
||||
// Set onClick to null, to ignore propagated onClick event
|
||||
delete props.onClick;
|
||||
const children = getSlot(this);
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { Transition } from 'vue';
|
||||
import omit from 'omit.js';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import Trigger from '../vc-trigger';
|
||||
|
|
@ -6,10 +7,11 @@ import { connect } from '../_util/store';
|
|||
import SubPopupMenu from './SubPopupMenu';
|
||||
import placements from './placements';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { getComponent, filterEmpty, getSlot, splitAttrs } from '../_util/props-util';
|
||||
import { getComponent, filterEmpty, getSlot, splitAttrs, findDOMNode } from '../_util/props-util';
|
||||
import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
|
||||
import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util';
|
||||
import getTransitionProps from '../_util/getTransitionProps';
|
||||
import createRefHooks from '../_util/createRefHooks';
|
||||
|
||||
let guid = 0;
|
||||
|
||||
|
|
@ -72,6 +74,7 @@ const SubMenu = {
|
|||
itemIcon: PropTypes.any,
|
||||
expandIcon: PropTypes.any,
|
||||
subMenuKey: PropTypes.string,
|
||||
theme: PropTypes.string,
|
||||
},
|
||||
mixins: [BaseMixin],
|
||||
isSubMenu: true,
|
||||
|
|
@ -90,6 +93,7 @@ const SubMenu = {
|
|||
this.internalMenuId = undefined;
|
||||
this.haveRendered = undefined;
|
||||
this.haveOpened = undefined;
|
||||
this.subMenuTitle = undefined;
|
||||
return {
|
||||
// defaultActiveFirst: false,
|
||||
};
|
||||
|
|
@ -325,18 +329,20 @@ const SubMenu = {
|
|||
|
||||
adjustWidth() {
|
||||
/* istanbul ignore if */
|
||||
if (!this.$refs.subMenuTitle || !this.menuInstance) {
|
||||
if (!this.subMenuTitle || !this.menuInstance) {
|
||||
return;
|
||||
}
|
||||
const popupMenu = this.menuInstance.$el;
|
||||
if (popupMenu.offsetWidth >= this.$refs.subMenuTitle.offsetWidth) {
|
||||
const popupMenu = findDOMNode(this.menuInstance);
|
||||
if (popupMenu.offsetWidth >= this.subMenuTitle.offsetWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
popupMenu.style.minWidth = `${this.$refs.subMenuTitle.offsetWidth}px`;
|
||||
popupMenu.style.minWidth = `${this.subMenuTitle.offsetWidth}px`;
|
||||
},
|
||||
saveSubMenuTitle(subMenuTitle) {
|
||||
this.subMenuTitle = subMenuTitle;
|
||||
},
|
||||
|
||||
renderChildren(children) {
|
||||
const props = { ...this.$props, ...this.$attrs };
|
||||
const subPopupMenuProps = {
|
||||
|
|
@ -365,7 +371,7 @@ const SubMenu = {
|
|||
itemIcon: getComponent(this, 'itemIcon'),
|
||||
expandIcon: getComponent(this, 'expandIcon'),
|
||||
children,
|
||||
click: this.onSubMenuClick,
|
||||
onClick: this.onSubMenuClick,
|
||||
onSelect: props.onSelect || noop,
|
||||
onDeselect: props.onDeselect || noop,
|
||||
onOpenChange: props.onOpenChange || noop,
|
||||
|
|
@ -404,9 +410,9 @@ const SubMenu = {
|
|||
});
|
||||
}
|
||||
return (
|
||||
<transition {...transitionProps}>
|
||||
<Transition {...transitionProps}>
|
||||
<SubPopupMenu v-show={props.isOpen} {...subPopupMenuProps} />
|
||||
</transition>
|
||||
</Transition>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
|
@ -421,7 +427,7 @@ const SubMenu = {
|
|||
const className = {
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-${props.mode}`]: true,
|
||||
[props.className]: !!props.className,
|
||||
[props.class]: !!props.class,
|
||||
[this.getOpenClassName()]: isOpen,
|
||||
[this.getActiveClassName()]: props.active || (isOpen && !isInlineMode),
|
||||
[this.getDisabledClassName()]: props.disabled,
|
||||
|
|
@ -439,7 +445,7 @@ const SubMenu = {
|
|||
let mouseEvents = {};
|
||||
let titleClickEvents = {};
|
||||
let titleMouseEvents = {};
|
||||
if (!props.disabled) {
|
||||
if (props.disabled === false) {
|
||||
mouseEvents = {
|
||||
onMouseleave: this.onMouseLeave,
|
||||
onMouseenter: this.onMouseEnter,
|
||||
|
|
@ -477,8 +483,9 @@ const SubMenu = {
|
|||
...titleClickEvents,
|
||||
style,
|
||||
class: `${prefixCls}-title`,
|
||||
ref: 'subMenuTitle',
|
||||
...createRefHooks(this.saveSubMenuTitle),
|
||||
};
|
||||
|
||||
// expand custom icon should NOT be displayed in menu with horizontal mode.
|
||||
let icon = null;
|
||||
if (props.mode !== 'horizontal') {
|
||||
|
|
@ -497,11 +504,13 @@ const SubMenu = {
|
|||
: triggerNode => triggerNode.parentNode;
|
||||
const popupPlacement = popupPlacementMap[props.mode];
|
||||
const popupAlign = props.popupOffset ? { offset: props.popupOffset } : {};
|
||||
const popupClassName = props.mode === 'inline' ? '' : props.popupClassName;
|
||||
let popupClassName = props.mode === 'inline' ? '' : props.popupClassName || '';
|
||||
popupClassName = `${prefixCls}-popup ${rootPrefixCls}-${parentMenu.theme} ${popupClassName}`;
|
||||
const liProps = {
|
||||
...omit(onEvents, ['onClick']),
|
||||
...mouseEvents,
|
||||
class: className,
|
||||
style: props.style,
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -511,9 +520,7 @@ const SubMenu = {
|
|||
{!isInlineMode && (
|
||||
<Trigger
|
||||
prefixCls={prefixCls}
|
||||
popupClassName={`${prefixCls}-popup ${rootPrefixCls}-${
|
||||
parentMenu.theme
|
||||
} ${popupClassName || ''}`}
|
||||
popupClassName={popupClassName}
|
||||
getPopupContainer={getPopupContainer}
|
||||
builtinPlacements={placements}
|
||||
builtinPlacements={Object.assign({}, placements, props.builtinPlacements)}
|
||||
|
|
@ -537,11 +544,13 @@ const SubMenu = {
|
|||
},
|
||||
};
|
||||
|
||||
const connected = connect(({ openKeys, activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({
|
||||
isOpen: openKeys.indexOf(eventKey) > -1,
|
||||
active: activeKey[subMenuKey] === eventKey,
|
||||
selectedKeys,
|
||||
}))(SubMenu);
|
||||
const connected = connect(({ openKeys, activeKey, selectedKeys }, { eventKey, subMenuKey }) => {
|
||||
return {
|
||||
isOpen: openKeys.indexOf(eventKey) > -1,
|
||||
active: activeKey[subMenuKey] === eventKey,
|
||||
selectedKeys,
|
||||
};
|
||||
})(SubMenu);
|
||||
|
||||
connected.isSubMenu = true;
|
||||
|
||||
|
|
|
|||
|
|
@ -45,8 +45,12 @@ export function getActiveKey(props, originalActiveKey) {
|
|||
if (activeKey !== undefined && activeKey !== null) {
|
||||
let found;
|
||||
loopMenuItem(children, (c, i) => {
|
||||
const propsData = c.componentOptions.propsData || {};
|
||||
if (c && !propsData.disabled && activeKey === getKeyFromChildrenIndex(c, eventKey, i)) {
|
||||
const propsData = c.props || {};
|
||||
if (
|
||||
c &&
|
||||
propsData.disabled !== false &&
|
||||
activeKey === getKeyFromChildrenIndex(c, eventKey, i)
|
||||
) {
|
||||
found = true;
|
||||
}
|
||||
});
|
||||
|
|
@ -57,9 +61,9 @@ export function getActiveKey(props, originalActiveKey) {
|
|||
activeKey = null;
|
||||
if (defaultActiveFirst) {
|
||||
loopMenuItem(children, (c, i) => {
|
||||
const propsData = c.componentOptions.propsData || {};
|
||||
const propsData = c.props || {};
|
||||
const noActiveKey = activeKey === null || activeKey === undefined;
|
||||
if (noActiveKey && c && !propsData.disabled) {
|
||||
if (noActiveKey && c && propsData.disabled !== false) {
|
||||
activeKey = getKeyFromChildrenIndex(c, eventKey, i);
|
||||
}
|
||||
});
|
||||
|
|
@ -274,7 +278,7 @@ const SubPopupMenu = {
|
|||
const state = this.$props.store.getState();
|
||||
const props = this.$props;
|
||||
const key = getKeyFromChildrenIndex(child, props.eventKey, i);
|
||||
const childProps = child.props; // 不包含默认值
|
||||
const childProps = child.props || {}; // child.props 包含事件
|
||||
|
||||
const isActive = key === state.activeKey[getEventKey(this.$props)];
|
||||
if (!childProps.disabled) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import isMobile from './utils/isMobile';
|
||||
import isObject from 'lodash/isObject';
|
||||
|
||||
export function noop() {}
|
||||
|
||||
export function getKeyFromChildrenIndex(child, menuEventKey, index) {
|
||||
const prefix = menuEventKey || '';
|
||||
return child.key === undefined ? `${prefix}item_${index}` : child.key;
|
||||
return child.key === null ? `${prefix}item_${index}` : child.key;
|
||||
}
|
||||
|
||||
export function getMenuIdFromSubMenuEventKey(eventKey) {
|
||||
|
|
@ -16,12 +17,13 @@ export function loopMenuItem(children, cb) {
|
|||
children.forEach(c => {
|
||||
index++;
|
||||
if (c && c.type && c.type.isMenuItemGroup) {
|
||||
c.$slots.default.forEach(c2 => {
|
||||
index++;
|
||||
c.componentOptions && cb(c2, index);
|
||||
});
|
||||
c.children.default &&
|
||||
c.children.default().forEach(c2 => {
|
||||
index++;
|
||||
cb(c2, index);
|
||||
});
|
||||
} else {
|
||||
c.componentOptions && cb(c, index);
|
||||
cb(c, index);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -34,18 +36,18 @@ export function loopMenuItemRecursively(children, keys, ret) {
|
|||
if (ret.find) {
|
||||
return;
|
||||
}
|
||||
if (c.data && c.data.slot && c.data.slot !== 'default') {
|
||||
return;
|
||||
}
|
||||
if (c && c.componentOptions) {
|
||||
const options = c.componentOptions.Ctor.options;
|
||||
if (!options || !(options.isSubMenu || options.isMenuItem || options.isMenuItemGroup)) {
|
||||
const construct = c.type;
|
||||
if (construct && isObject(construct)) {
|
||||
if (
|
||||
!construct ||
|
||||
!(construct.isSubMenu || construct.isMenuItem || construct.isMenuItemGroup)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (keys.indexOf(c.key) !== -1) {
|
||||
ret.find = true;
|
||||
} else if (c.componentOptions.children) {
|
||||
loopMenuItemRecursively(c.componentOptions.children, keys, ret);
|
||||
} else if (c.children && c.children.default) {
|
||||
loopMenuItemRecursively(c.children.default(), keys, ret);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -112,7 +114,6 @@ export const menuAllProps = [
|
|||
'__propsSymbol__',
|
||||
'slots',
|
||||
'ref',
|
||||
'componentWillReceiveProps',
|
||||
'isRootMenu',
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import PropTypes from '../_util/vue-types';
|
|||
import Trigger from '../vc-trigger';
|
||||
import { placements } from './placements';
|
||||
import Content from './Content';
|
||||
import { hasProp, getComponent, getOptionProps } from '../_util/props-util';
|
||||
import { hasProp, getComponent, getOptionProps, getSlot } from '../_util/props-util';
|
||||
function noop() {}
|
||||
export default {
|
||||
name: 'Tooltip',
|
||||
|
|
@ -95,6 +95,6 @@ export default {
|
|||
ref: 'trigger',
|
||||
popup: this.getPopupElement(),
|
||||
};
|
||||
return <Trigger {...triggerProps}>{this.$slots.default && this.$slots.default()[0]}</Trigger>;
|
||||
return <Trigger {...triggerProps}>{getSlot(this)[0]}</Trigger>;
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,14 +22,14 @@ function returnDocument() {
|
|||
return window.document;
|
||||
}
|
||||
const ALL_HANDLERS = [
|
||||
'click',
|
||||
'mousedown',
|
||||
'touchstart',
|
||||
'mouseenter',
|
||||
'mouseleave',
|
||||
'focus',
|
||||
'blur',
|
||||
'contextmenu',
|
||||
'onClick',
|
||||
'onMousedown',
|
||||
'onTouchstart',
|
||||
'onMouseenter',
|
||||
'onMouseleave',
|
||||
'onFocus',
|
||||
'onBlur',
|
||||
'onContextmenu',
|
||||
];
|
||||
|
||||
export default {
|
||||
|
|
@ -105,8 +105,8 @@ export default {
|
|||
},
|
||||
setup() {
|
||||
return {
|
||||
vcTriggerContext: inject('configProvider', {}),
|
||||
savePopupRef: inject('vcTriggerContext', noop),
|
||||
vcTriggerContext: inject('vcTriggerContext', {}),
|
||||
savePopupRef: inject('savePopupRef', noop),
|
||||
dialogContext: inject('dialogContext', null),
|
||||
};
|
||||
},
|
||||
|
|
@ -181,17 +181,17 @@ export default {
|
|||
},
|
||||
onMouseenter(e) {
|
||||
const { mouseEnterDelay } = this.$props;
|
||||
this.fireEvents('mouseenter', e);
|
||||
this.fireEvents('onMouseenter', e);
|
||||
this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e);
|
||||
},
|
||||
|
||||
onMouseMove(e) {
|
||||
this.fireEvents('mousemove', e);
|
||||
this.fireEvents('onMousemove', e);
|
||||
this.setPoint(e);
|
||||
},
|
||||
|
||||
onMouseleave(e) {
|
||||
this.fireEvents('mouseleave', e);
|
||||
this.fireEvents('onMouseleave', e);
|
||||
this.delaySetPopupVisible(false, this.$props.mouseLeaveDelay);
|
||||
},
|
||||
|
||||
|
|
@ -214,7 +214,7 @@ export default {
|
|||
},
|
||||
|
||||
onFocus(e) {
|
||||
this.fireEvents('focus', e);
|
||||
this.fireEvents('onFocus', e);
|
||||
// incase focusin and focusout
|
||||
this.clearDelayTimer();
|
||||
if (this.isFocusToShow()) {
|
||||
|
|
@ -224,18 +224,18 @@ export default {
|
|||
},
|
||||
|
||||
onMousedown(e) {
|
||||
this.fireEvents('mousedown', e);
|
||||
this.fireEvents('onMousedown', e);
|
||||
this.preClickTime = Date.now();
|
||||
},
|
||||
|
||||
onTouchstart(e) {
|
||||
this.fireEvents('touchstart', e);
|
||||
this.fireEvents('onTouchstart', e);
|
||||
this.preTouchTime = Date.now();
|
||||
},
|
||||
|
||||
onBlur(e) {
|
||||
if (!contains(e.target, e.relatedTarget || document.activeElement)) {
|
||||
this.fireEvents('blur', e);
|
||||
this.fireEvents('onBlur', e);
|
||||
this.clearDelayTimer();
|
||||
if (this.isBlurToHide()) {
|
||||
this.delaySetPopupVisible(false, this.$props.blurDelay);
|
||||
|
|
@ -245,7 +245,7 @@ export default {
|
|||
|
||||
onContextmenu(e) {
|
||||
e.preventDefault();
|
||||
this.fireEvents('contextmenu', e);
|
||||
this.fireEvents('onContextmenu', e);
|
||||
this.setPopupVisible(true, e);
|
||||
},
|
||||
|
||||
|
|
@ -256,7 +256,7 @@ export default {
|
|||
},
|
||||
|
||||
onClick(event) {
|
||||
this.fireEvents('click', event);
|
||||
this.fireEvents('onClick', event);
|
||||
// focus will trigger click
|
||||
if (this.focusTime) {
|
||||
let preTime;
|
||||
|
|
@ -578,10 +578,10 @@ export default {
|
|||
const { forceRender, alignPoint } = this.$props;
|
||||
|
||||
if (children.length > 1) {
|
||||
warning(false, 'Trigger $slots.default.length > 1, just support only one default', true);
|
||||
warning(false, 'Trigger children just support only one default', true);
|
||||
}
|
||||
const child = children[0];
|
||||
this.childOriginEvents = getEvents(this);
|
||||
this.childOriginEvents = getEvents(child);
|
||||
const newChildProps = {
|
||||
key: 'trigger',
|
||||
ref: 'trigger',
|
||||
|
|
@ -590,7 +590,7 @@ export default {
|
|||
if (this.isContextmenuToShow()) {
|
||||
newChildProps.onContextmenu = this.onContextmenu;
|
||||
} else {
|
||||
newChildProps.onContextmenu = this.createTwoChains('contextmenu');
|
||||
newChildProps.onContextmenu = this.createTwoChains('onContextmenu');
|
||||
}
|
||||
|
||||
if (this.isClickToHide() || this.isClickToShow()) {
|
||||
|
|
@ -598,8 +598,8 @@ export default {
|
|||
newChildProps.onMousedown = this.onMousedown;
|
||||
newChildProps.onTouchstart = this.onTouchstart;
|
||||
} else {
|
||||
newChildProps.onClick = this.createTwoChains('click');
|
||||
newChildProps.onMousedown = this.createTwoChains('mousedown');
|
||||
newChildProps.onClick = this.createTwoChains('onClick');
|
||||
newChildProps.onMousedown = this.createTwoChains('onMousedown');
|
||||
newChildProps.onTouchstart = this.createTwoChains('onTouchstart');
|
||||
}
|
||||
if (this.isMouseEnterToShow()) {
|
||||
|
|
@ -608,22 +608,22 @@ export default {
|
|||
newChildProps.onMousemove = this.onMouseMove;
|
||||
}
|
||||
} else {
|
||||
newChildProps.onMouseenter = this.createTwoChains('mouseenter');
|
||||
newChildProps.onMouseenter = this.createTwoChains('onMouseenter');
|
||||
}
|
||||
if (this.isMouseLeaveToHide()) {
|
||||
newChildProps.onMouseleave = this.onMouseleave;
|
||||
} else {
|
||||
newChildProps.onMouseleave = this.createTwoChains('mouseleave');
|
||||
newChildProps.onMouseleave = this.createTwoChains('onMouseleave');
|
||||
}
|
||||
|
||||
if (this.isFocusToShow() || this.isBlurToHide()) {
|
||||
newChildProps.onFocus = this.onFocus;
|
||||
newChildProps.onBlur = this.onBlur;
|
||||
} else {
|
||||
newChildProps.onFocus = this.createTwoChains('focus');
|
||||
newChildProps.onFocus = this.createTwoChains('onFocus');
|
||||
newChildProps.onBlur = e => {
|
||||
if (e && (!e.relatedTarget || !contains(e.target, e.relatedTarget))) {
|
||||
this.createTwoChains('blur')(e);
|
||||
this.createTwoChains('onBlur')(e);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue