github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: menu

pull/2468/head
tanjinzhou 2020-06-18 18:51:56 +08:00
parent 5c425cec90
commit 82bb43bbe8
13 changed files with 124 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/_util/BaseMixin.js
View File

@ -1,4 +1,5 @@
import { getOptionProps } from './props-util'; import { getOptionProps } from './props-util';
import { isOn } from './util';
export default { export default {
methods: { methods: {
@ -26,7 +27,9 @@ export default {
const args = [].slice.call(arguments, 0); const args = [].slice.call(arguments, 0);
let eventName = args[0]; let eventName = args[0];
// TODO: 后续统一改成onXxxx，不在运行时转，提升性能 // 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]; const event = this.$props[eventName] || this.$attrs[eventName];
if (args.length && event) { if (args.length && event) {
if (Array.isArray(event)) { if (Array.isArray(event)) {

4
components/_util/createRefHooks.js
View File

@ -1,4 +1,4 @@
const createRef = fn => { const createRefHooks = fn => {
return { return {
onVnodeBeforeMount: vnode => { onVnodeBeforeMount: vnode => {
fn(vnode.component || vnode.el, vnode.key); fn(vnode.component || vnode.el, vnode.key);
@ -11,4 +11,4 @@ const createRef = fn => {
}, },
}; };
}; };
export default createRef; export default createRefHooks;

28
components/_util/props-util.js
View File

@ -93,6 +93,13 @@ const getSlotOptions = ele => {
} }
return componentOptions ? componentOptions.Ctor.options || {} : {}; return componentOptions ? componentOptions.Ctor.options || {} : {};
}; };
const findDOMNode = instance => {
let node = instance.$el;
while (!node.tagName) {
node = node.nextSibling;
}
return node;
};
const getOptionProps = instance => { const getOptionProps = instance => {
const res = {}; const res = {};
if (instance.$ && instance.$.vnode) { if (instance.$ && instance.$.vnode) {
@ -218,18 +225,16 @@ const getKey = ele => {
return key; return key;
}; };
export function getEvents(child) { export function getEvents(ele, on = true) {
const { $attrs } = child; let props = {};
return splitAttrs($attrs).events; if (ele.$) {
props = { ...props, ...ele.$attrs };
// let events = {}; } else {
// if (child.componentOptions && child.componentOptions.listeners) { props = { ...props, ...ele.props };
// events = child.componentOptions.listeners;
// } else if (child.data && child.data.on) {
// events = child.data.on;
// }
// return { ...events };
} }
return splitAttrs(props)[on ? 'onEvents' : 'events'];
}
export function getEvent(child, event) { export function getEvent(child, event) {
return child.props && child.props[event]; return child.props && child.props[event];
} }
@ -347,5 +352,6 @@ export {
getSlot, getSlot,
getAllProps, getAllProps,
getAllChildren, getAllChildren,
findDOMNode,
}; };
export default hasProp; export default hasProp;

4
components/_util/proxyComponent.jsx
View File

@ -5,6 +5,7 @@ import { getOptionProps } from './props-util';
function getDisplayName(WrappedComponent) { function getDisplayName(WrappedComponent) {
return WrappedComponent.name || 'Component'; return WrappedComponent.name || 'Component';
} }
let k = 1;
export default function wrapWithConnect(WrappedComponent) { export default function wrapWithConnect(WrappedComponent) {
const tempProps = WrappedComponent.props || {}; const tempProps = WrappedComponent.props || {};
const methods = WrappedComponent.methods || {}; const methods = WrappedComponent.methods || {};
@ -29,8 +30,7 @@ export default function wrapWithConnect(WrappedComponent) {
const wrapProps = { const wrapProps = {
...props, ...props,
...$attrs, ...$attrs,
__propsSymbol__: Symbol(), __propsSymbol__: k++,
componentWillReceiveProps: { ...props },
ref: 'wrappedInstance', ref: 'wrappedInstance',
}; };
return createVNode(WrappedComponent, wrapProps, $slots); return createVNode(WrappedComponent, wrapProps, $slots);

2
components/tooltip/Tooltip.jsx
View File

@ -187,7 +187,7 @@ export default {
isValidElement(children) ? children : <span>{children}</span>, isValidElement(children) ? children : <span>{children}</span>,
); );
const childCls = { const childCls = {
[openClassName || `${prefixCls}-open`]: true, [openClassName || `${prefixCls}-open`]: sVisible,
[child.props && child.props.class]: child.props && child.props.class, [child.props && child.props.class]: child.props && child.props.class,
}; };
const tooltipProps = { const tooltipProps = {

10
components/vc-menu/DOMWrap.jsx
View File

@ -4,7 +4,7 @@ import SubMenu from './SubMenu';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { getWidth, setStyle, menuAllProps } from './util'; import { getWidth, setStyle, menuAllProps } from './util';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import { getPropsData, getAllProps, getSlot } from '../_util/props-util'; import { getPropsData, getAllProps, getSlot, findDOMNode } from '../_util/props-util';
const canUseDOM = !!( const canUseDOM = !!(
typeof window !== 'undefined' && typeof window !== 'undefined' &&
@ -44,7 +44,7 @@ const DOMWrap = {
this.$nextTick(() => { this.$nextTick(() => {
this.setChildrenWidthAndResize(); this.setChildrenWidthAndResize();
if (this.level === 1 && this.mode === 'horizontal') { if (this.level === 1 && this.mode === 'horizontal') {
const menuUl = this.$el; const menuUl = findDOMNode(this);
if (!menuUl) { if (!menuUl) {
return; return;
} }
@ -92,7 +92,7 @@ const DOMWrap = {
// get all valid menuItem nodes // get all valid menuItem nodes
getMenuItemNodes() { getMenuItemNodes() {
const { prefixCls } = this.$props; const { prefixCls } = this.$props;
const ul = this.$el; const ul = findDOMNode(this);
if (!ul) { if (!ul) {
return []; return [];
} }
@ -156,7 +156,7 @@ const DOMWrap = {
if (this.mode !== 'horizontal') { if (this.mode !== 'horizontal') {
return; return;
} }
const ul = this.$el; const ul = findDOMNode(this);
if (!ul) { if (!ul) {
return; return;
@ -203,7 +203,7 @@ const DOMWrap = {
return; return;
} }
const ul = this.$el; const ul = findDOMNode(this);
if (!ul) { if (!ul) {
return; return;
} }

15
components/vc-menu/MenuItem.jsx
View File

@ -4,7 +4,7 @@ import BaseMixin from '../_util/BaseMixin';
import scrollIntoView from 'dom-scroll-into-view'; import scrollIntoView from 'dom-scroll-into-view';
import { connect } from '../_util/store'; import { connect } from '../_util/store';
import { noop, menuAllProps } from './util'; import { noop, menuAllProps } from './util';
import { getComponent, getSlot } from '../_util/props-util'; import { getComponent, getSlot, findDOMNode } from '../_util/props-util';
const props = { const props = {
attribute: PropTypes.object, attribute: PropTypes.object,
@ -17,13 +17,7 @@ const props = {
index: PropTypes.number, index: PropTypes.number,
inlineIndent: PropTypes.number.def(24), inlineIndent: PropTypes.number.def(24),
level: PropTypes.number.def(1), level: PropTypes.number.def(1),
mode: PropTypes.oneOf([ mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']),
'horizontal',
'vertical',
'vertical-left',
'vertical-right',
'inline',
]).def('vertical'),
parentMenu: PropTypes.object, parentMenu: PropTypes.object,
multiple: PropTypes.bool, multiple: PropTypes.bool,
value: PropTypes.any, value: PropTypes.any,
@ -35,7 +29,7 @@ const props = {
// clearSubMenuTimers: PropTypes.func.def(noop), // clearSubMenuTimers: PropTypes.func.def(noop),
}; };
const MenuItem = { const MenuItem = {
name: 'MenuItem', name: 'AMenuItem',
inheritAttrs: false, inheritAttrs: false,
props, props,
mixins: [BaseMixin], mixins: [BaseMixin],
@ -49,7 +43,7 @@ const MenuItem = {
this.$nextTick(() => { this.$nextTick(() => {
const { active, parentMenu, eventKey } = this.$props; const { active, parentMenu, eventKey } = this.$props;
if (!this.prevActive && active && (!parentMenu || !parentMenu[`scrolled-${eventKey}`])) { if (!this.prevActive && active && (!parentMenu || !parentMenu[`scrolled-${eventKey}`])) {
scrollIntoView(this.$el, this.parentMenu.$el, { scrollIntoView(this.$refs.node, findDOMNode(this.parentMenu), {
onlyScrollIfNeeded: true, onlyScrollIfNeeded: true,
}); });
parentMenu[`scrolled-${eventKey}`] = true; parentMenu[`scrolled-${eventKey}`] = true;
@ -188,6 +182,7 @@ const MenuItem = {
...props, ...props,
...attrs, ...attrs,
...mouseEvent, ...mouseEvent,
ref: 'node',
}; };
delete liProps.children; delete liProps.children;
return ( return (

6
components/vc-menu/MenuItemGroup.jsx
View File

@ -1,7 +1,6 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { getComponent, getSlot } from '../_util/props-util'; import { getComponent, getSlot } from '../_util/props-util';
import { menuAllProps } from './util';
// import { menuAllProps } from './util'
const MenuItemGroup = { const MenuItemGroup = {
name: 'MenuItemGroup', name: 'MenuItemGroup',
@ -27,7 +26,8 @@ const MenuItemGroup = {
const { class: cls = '', rootPrefixCls, title } = props; const { class: cls = '', rootPrefixCls, title } = props;
const titleClassName = `${rootPrefixCls}-item-group-title`; const titleClassName = `${rootPrefixCls}-item-group-title`;
const listClassName = `${rootPrefixCls}-item-group-list`; 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; delete props.onClick;
const children = getSlot(this); const children = getSlot(this);
return ( return (

45
components/vc-menu/SubMenu.jsx
View File

@ -1,3 +1,4 @@
import { Transition } from 'vue';
import omit from 'omit.js'; import omit from 'omit.js';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import Trigger from '../vc-trigger'; import Trigger from '../vc-trigger';
@ -6,10 +7,11 @@ import { connect } from '../_util/store';
import SubPopupMenu from './SubPopupMenu'; import SubPopupMenu from './SubPopupMenu';
import placements from './placements'; import placements from './placements';
import BaseMixin from '../_util/BaseMixin'; 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 { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util'; import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util';
import getTransitionProps from '../_util/getTransitionProps'; import getTransitionProps from '../_util/getTransitionProps';
import createRefHooks from '../_util/createRefHooks';
let guid = 0; let guid = 0;
@ -72,6 +74,7 @@ const SubMenu = {
itemIcon: PropTypes.any, itemIcon: PropTypes.any,
expandIcon: PropTypes.any, expandIcon: PropTypes.any,
subMenuKey: PropTypes.string, subMenuKey: PropTypes.string,
theme: PropTypes.string,
}, },
mixins: [BaseMixin], mixins: [BaseMixin],
isSubMenu: true, isSubMenu: true,
@ -90,6 +93,7 @@ const SubMenu = {
this.internalMenuId = undefined; this.internalMenuId = undefined;
this.haveRendered = undefined; this.haveRendered = undefined;
this.haveOpened = undefined; this.haveOpened = undefined;
this.subMenuTitle = undefined;
return { return {
// defaultActiveFirst: false, // defaultActiveFirst: false,
}; };
@ -325,18 +329,20 @@ const SubMenu = {
adjustWidth() { adjustWidth() {
/* istanbul ignore if */ /* istanbul ignore if */
if (!this.$refs.subMenuTitle || !this.menuInstance) { if (!this.subMenuTitle || !this.menuInstance) {
return; return;
} }
const popupMenu = this.menuInstance.$el; const popupMenu = findDOMNode(this.menuInstance);
if (popupMenu.offsetWidth >= this.$refs.subMenuTitle.offsetWidth) { if (popupMenu.offsetWidth >= this.subMenuTitle.offsetWidth) {
return; return;
} }
/* istanbul ignore next */ /* 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) { renderChildren(children) {
const props = { ...this.$props, ...this.$attrs }; const props = { ...this.$props, ...this.$attrs };
const subPopupMenuProps = { const subPopupMenuProps = {
@ -365,7 +371,7 @@ const SubMenu = {
itemIcon: getComponent(this, 'itemIcon'), itemIcon: getComponent(this, 'itemIcon'),
expandIcon: getComponent(this, 'expandIcon'), expandIcon: getComponent(this, 'expandIcon'),
children, children,
click: this.onSubMenuClick, onClick: this.onSubMenuClick,
onSelect: props.onSelect || noop, onSelect: props.onSelect || noop,
onDeselect: props.onDeselect || noop, onDeselect: props.onDeselect || noop,
onOpenChange: props.onOpenChange || noop, onOpenChange: props.onOpenChange || noop,
@ -404,9 +410,9 @@ const SubMenu = {
}); });
} }
return ( return (
<transition {...transitionProps}> <Transition {...transitionProps}>
<SubPopupMenu v-show={props.isOpen} {...subPopupMenuProps} /> <SubPopupMenu v-show={props.isOpen} {...subPopupMenuProps} />
</transition> </Transition>
); );
}, },
}, },
@ -421,7 +427,7 @@ const SubMenu = {
const className = { const className = {
[prefixCls]: true, [prefixCls]: true,
[`${prefixCls}-${props.mode}`]: true, [`${prefixCls}-${props.mode}`]: true,
[props.className]: !!props.className, [props.class]: !!props.class,
[this.getOpenClassName()]: isOpen, [this.getOpenClassName()]: isOpen,
[this.getActiveClassName()]: props.active || (isOpen && !isInlineMode), [this.getActiveClassName()]: props.active || (isOpen && !isInlineMode),
[this.getDisabledClassName()]: props.disabled, [this.getDisabledClassName()]: props.disabled,
@ -439,7 +445,7 @@ const SubMenu = {
let mouseEvents = {}; let mouseEvents = {};
let titleClickEvents = {}; let titleClickEvents = {};
let titleMouseEvents = {}; let titleMouseEvents = {};
if (!props.disabled) { if (props.disabled === false) {
mouseEvents = { mouseEvents = {
onMouseleave: this.onMouseLeave, onMouseleave: this.onMouseLeave,
onMouseenter: this.onMouseEnter, onMouseenter: this.onMouseEnter,
@ -477,8 +483,9 @@ const SubMenu = {
...titleClickEvents, ...titleClickEvents,
style, style,
class: `${prefixCls}-title`, class: `${prefixCls}-title`,
ref: 'subMenuTitle', ...createRefHooks(this.saveSubMenuTitle),
}; };
// expand custom icon should NOT be displayed in menu with horizontal mode. // expand custom icon should NOT be displayed in menu with horizontal mode.
let icon = null; let icon = null;
if (props.mode !== 'horizontal') { if (props.mode !== 'horizontal') {
@ -497,11 +504,13 @@ const SubMenu = {
: triggerNode => triggerNode.parentNode; : triggerNode => triggerNode.parentNode;
const popupPlacement = popupPlacementMap[props.mode]; const popupPlacement = popupPlacementMap[props.mode];
const popupAlign = props.popupOffset ? { offset: props.popupOffset } : {}; 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 = { const liProps = {
...omit(onEvents, ['onClick']), ...omit(onEvents, ['onClick']),
...mouseEvents, ...mouseEvents,
class: className, class: className,
style: props.style,
}; };
return ( return (
@ -511,9 +520,7 @@ const SubMenu = {
{!isInlineMode && ( {!isInlineMode && (
<Trigger <Trigger
prefixCls={prefixCls} prefixCls={prefixCls}
popupClassName={`${prefixCls}-popup ${rootPrefixCls}-${ popupClassName={popupClassName}
parentMenu.theme
} ${popupClassName || ''}`}
getPopupContainer={getPopupContainer} getPopupContainer={getPopupContainer}
builtinPlacements={placements} builtinPlacements={placements}
builtinPlacements={Object.assign({}, placements, props.builtinPlacements)} builtinPlacements={Object.assign({}, placements, props.builtinPlacements)}
@ -537,11 +544,13 @@ const SubMenu = {
}, },
}; };
const connected = connect(({ openKeys, activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({ const connected = connect(({ openKeys, activeKey, selectedKeys }, { eventKey, subMenuKey }) => {
return {
isOpen: openKeys.indexOf(eventKey) > -1, isOpen: openKeys.indexOf(eventKey) > -1,
active: activeKey[subMenuKey] === eventKey, active: activeKey[subMenuKey] === eventKey,
selectedKeys, selectedKeys,
}))(SubMenu); };
})(SubMenu);
connected.isSubMenu = true; connected.isSubMenu = true;

14
components/vc-menu/SubPopupMenu.jsx
View File

@ -45,8 +45,12 @@ export function getActiveKey(props, originalActiveKey) {
if (activeKey !== undefined && activeKey !== null) { if (activeKey !== undefined && activeKey !== null) {
let found; let found;
loopMenuItem(children, (c, i) => { loopMenuItem(children, (c, i) => {
const propsData = c.componentOptions.propsData || {}; const propsData = c.props || {};
if (c && !propsData.disabled && activeKey === getKeyFromChildrenIndex(c, eventKey, i)) { if (
c &&
propsData.disabled !== false &&
activeKey === getKeyFromChildrenIndex(c, eventKey, i)
) {
found = true; found = true;
} }
}); });
@ -57,9 +61,9 @@ export function getActiveKey(props, originalActiveKey) {
activeKey = null; activeKey = null;
if (defaultActiveFirst) { if (defaultActiveFirst) {
loopMenuItem(children, (c, i) => { loopMenuItem(children, (c, i) => {
const propsData = c.componentOptions.propsData || {}; const propsData = c.props || {};
const noActiveKey = activeKey === null || activeKey === undefined; const noActiveKey = activeKey === null || activeKey === undefined;
if (noActiveKey && c && !propsData.disabled) { if (noActiveKey && c && propsData.disabled !== false) {
activeKey = getKeyFromChildrenIndex(c, eventKey, i); activeKey = getKeyFromChildrenIndex(c, eventKey, i);
} }
}); });
@ -274,7 +278,7 @@ const SubPopupMenu = {
const state = this.$props.store.getState(); const state = this.$props.store.getState();
const props = this.$props; const props = this.$props;
const key = getKeyFromChildrenIndex(child, props.eventKey, i); 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)]; const isActive = key === state.activeKey[getEventKey(this.$props)];
if (!childProps.disabled) { if (!childProps.disabled) {

27
components/vc-menu/util.js
View File

@ -1,10 +1,11 @@
import isMobile from './utils/isMobile'; import isMobile from './utils/isMobile';
import isObject from 'lodash/isObject';
export function noop() {} export function noop() {}
export function getKeyFromChildrenIndex(child, menuEventKey, index) { export function getKeyFromChildrenIndex(child, menuEventKey, index) {
const prefix = menuEventKey || ''; 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) { export function getMenuIdFromSubMenuEventKey(eventKey) {
@ -16,12 +17,13 @@ export function loopMenuItem(children, cb) {
children.forEach(c => { children.forEach(c => {
index++; index++;
if (c && c.type && c.type.isMenuItemGroup) { if (c && c.type && c.type.isMenuItemGroup) {
c.$slots.default.forEach(c2 => { c.children.default &&
c.children.default().forEach(c2 => {
index++; index++;
c.componentOptions && cb(c2, index); cb(c2, index);
}); });
} else { } else {
c.componentOptions && cb(c, index); cb(c, index);
} }
}); });
} }
@ -34,18 +36,18 @@ export function loopMenuItemRecursively(children, keys, ret) {
if (ret.find) { if (ret.find) {
return; return;
} }
if (c.data && c.data.slot && c.data.slot !== 'default') { const construct = c.type;
return; if (construct && isObject(construct)) {
} if (
if (c && c.componentOptions) { !construct ||
const options = c.componentOptions.Ctor.options; !(construct.isSubMenu || construct.isMenuItem || construct.isMenuItemGroup)
if (!options || !(options.isSubMenu || options.isMenuItem || options.isMenuItemGroup)) { ) {
return; return;
} }
if (keys.indexOf(c.key) !== -1) { if (keys.indexOf(c.key) !== -1) {
ret.find = true; ret.find = true;
} else if (c.componentOptions.children) { } else if (c.children && c.children.default) {
loopMenuItemRecursively(c.componentOptions.children, keys, ret); loopMenuItemRecursively(c.children.default(), keys, ret);
} }
} }
}); });
@ -112,7 +114,6 @@ export const menuAllProps = [
'__propsSymbol__', '__propsSymbol__',
'slots', 'slots',
'ref', 'ref',
'componentWillReceiveProps',
'isRootMenu', 'isRootMenu',
]; ];

4
components/vc-tooltip/Tooltip.jsx
View File

@ -2,7 +2,7 @@ import PropTypes from '../_util/vue-types';
import Trigger from '../vc-trigger'; import Trigger from '../vc-trigger';
import { placements } from './placements'; import { placements } from './placements';
import Content from './Content'; import Content from './Content';
import { hasProp, getComponent, getOptionProps } from '../_util/props-util'; import { hasProp, getComponent, getOptionProps, getSlot } from '../_util/props-util';
function noop() {} function noop() {}
export default { export default {
name: 'Tooltip', name: 'Tooltip',
@ -95,6 +95,6 @@ export default {
ref: 'trigger', ref: 'trigger',
popup: this.getPopupElement(), popup: this.getPopupElement(),
}; };
return <Trigger {...triggerProps}>{this.$slots.default && this.$slots.default()[0]}</Trigger>; return <Trigger {...triggerProps}>{getSlot(this)[0]}</Trigger>;
}, },
}; };

56
components/vc-trigger/Trigger.jsx
View File

@ -22,14 +22,14 @@ function returnDocument() {
return window.document; return window.document;
} }
const ALL_HANDLERS = [ const ALL_HANDLERS = [
'click', 'onClick',
'mousedown', 'onMousedown',
'touchstart', 'onTouchstart',
'mouseenter', 'onMouseenter',
'mouseleave', 'onMouseleave',
'focus', 'onFocus',
'blur', 'onBlur',
'contextmenu', 'onContextmenu',
]; ];
export default { export default {
@ -105,8 +105,8 @@ export default {
}, },
setup() { setup() {
return { return {
vcTriggerContext: inject('configProvider', {}), vcTriggerContext: inject('vcTriggerContext', {}),
savePopupRef: inject('vcTriggerContext', noop), savePopupRef: inject('savePopupRef', noop),
dialogContext: inject('dialogContext', null), dialogContext: inject('dialogContext', null),
}; };
}, },
@ -181,17 +181,17 @@ export default {
}, },
onMouseenter(e) { onMouseenter(e) {
const { mouseEnterDelay } = this.$props; const { mouseEnterDelay } = this.$props;
this.fireEvents('mouseenter', e); this.fireEvents('onMouseenter', e);
this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e); this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e);
}, },
onMouseMove(e) { onMouseMove(e) {
this.fireEvents('mousemove', e); this.fireEvents('onMousemove', e);
this.setPoint(e); this.setPoint(e);
}, },
onMouseleave(e) { onMouseleave(e) {
this.fireEvents('mouseleave', e); this.fireEvents('onMouseleave', e);
this.delaySetPopupVisible(false, this.$props.mouseLeaveDelay); this.delaySetPopupVisible(false, this.$props.mouseLeaveDelay);
}, },
@ -214,7 +214,7 @@ export default {
}, },
onFocus(e) { onFocus(e) {
this.fireEvents('focus', e); this.fireEvents('onFocus', e);
// incase focusin and focusout // incase focusin and focusout
this.clearDelayTimer(); this.clearDelayTimer();
if (this.isFocusToShow()) { if (this.isFocusToShow()) {
@ -224,18 +224,18 @@ export default {
}, },
onMousedown(e) { onMousedown(e) {
this.fireEvents('mousedown', e); this.fireEvents('onMousedown', e);
this.preClickTime = Date.now(); this.preClickTime = Date.now();
}, },
onTouchstart(e) { onTouchstart(e) {
this.fireEvents('touchstart', e); this.fireEvents('onTouchstart', e);
this.preTouchTime = Date.now(); this.preTouchTime = Date.now();
}, },
onBlur(e) { onBlur(e) {
if (!contains(e.target, e.relatedTarget || document.activeElement)) { if (!contains(e.target, e.relatedTarget || document.activeElement)) {
this.fireEvents('blur', e); this.fireEvents('onBlur', e);
this.clearDelayTimer(); this.clearDelayTimer();
if (this.isBlurToHide()) { if (this.isBlurToHide()) {
this.delaySetPopupVisible(false, this.$props.blurDelay); this.delaySetPopupVisible(false, this.$props.blurDelay);
@ -245,7 +245,7 @@ export default {
onContextmenu(e) { onContextmenu(e) {
e.preventDefault(); e.preventDefault();
this.fireEvents('contextmenu', e); this.fireEvents('onContextmenu', e);
this.setPopupVisible(true, e); this.setPopupVisible(true, e);
}, },
@ -256,7 +256,7 @@ export default {
}, },
onClick(event) { onClick(event) {
this.fireEvents('click', event); this.fireEvents('onClick', event);
// focus will trigger click // focus will trigger click
if (this.focusTime) { if (this.focusTime) {
let preTime; let preTime;
@ -578,10 +578,10 @@ export default {
const { forceRender, alignPoint } = this.$props; const { forceRender, alignPoint } = this.$props;
if (children.length > 1) { 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]; const child = children[0];
this.childOriginEvents = getEvents(this); this.childOriginEvents = getEvents(child);
const newChildProps = { const newChildProps = {
key: 'trigger', key: 'trigger',
ref: 'trigger', ref: 'trigger',
@ -590,7 +590,7 @@ export default {
if (this.isContextmenuToShow()) { if (this.isContextmenuToShow()) {
newChildProps.onContextmenu = this.onContextmenu; newChildProps.onContextmenu = this.onContextmenu;
} else { } else {
newChildProps.onContextmenu = this.createTwoChains('contextmenu'); newChildProps.onContextmenu = this.createTwoChains('onContextmenu');
} }
if (this.isClickToHide() || this.isClickToShow()) { if (this.isClickToHide() || this.isClickToShow()) {
@ -598,8 +598,8 @@ export default {
newChildProps.onMousedown = this.onMousedown; newChildProps.onMousedown = this.onMousedown;
newChildProps.onTouchstart = this.onTouchstart; newChildProps.onTouchstart = this.onTouchstart;
} else { } else {
newChildProps.onClick = this.createTwoChains('click'); newChildProps.onClick = this.createTwoChains('onClick');
newChildProps.onMousedown = this.createTwoChains('mousedown'); newChildProps.onMousedown = this.createTwoChains('onMousedown');
newChildProps.onTouchstart = this.createTwoChains('onTouchstart'); newChildProps.onTouchstart = this.createTwoChains('onTouchstart');
} }
if (this.isMouseEnterToShow()) { if (this.isMouseEnterToShow()) {
@ -608,22 +608,22 @@ export default {
newChildProps.onMousemove = this.onMouseMove; newChildProps.onMousemove = this.onMouseMove;
} }
} else { } else {
newChildProps.onMouseenter = this.createTwoChains('mouseenter'); newChildProps.onMouseenter = this.createTwoChains('onMouseenter');
} }
if (this.isMouseLeaveToHide()) { if (this.isMouseLeaveToHide()) {
newChildProps.onMouseleave = this.onMouseleave; newChildProps.onMouseleave = this.onMouseleave;
} else { } else {
newChildProps.onMouseleave = this.createTwoChains('mouseleave'); newChildProps.onMouseleave = this.createTwoChains('onMouseleave');
} }
if (this.isFocusToShow() || this.isBlurToHide()) { if (this.isFocusToShow() || this.isBlurToHide()) {
newChildProps.onFocus = this.onFocus; newChildProps.onFocus = this.onFocus;
newChildProps.onBlur = this.onBlur; newChildProps.onBlur = this.onBlur;
} else { } else {
newChildProps.onFocus = this.createTwoChains('focus'); newChildProps.onFocus = this.createTwoChains('onFocus');
newChildProps.onBlur = e => { newChildProps.onBlur = e => {
if (e && (!e.relatedTarget || !contains(e.target, e.relatedTarget))) { if (e && (!e.relatedTarget || !contains(e.target, e.relatedTarget))) {
this.createTwoChains('blur')(e); this.createTwoChains('onBlur')(e);
} }
}; };
} }