2019-01-12 03:33:27 +00:00
|
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
import Trigger from '../vc-trigger';
|
|
|
|
import { placements } from './placements';
|
|
|
|
import Content from './Content';
|
2020-06-18 10:51:56 +00:00
|
|
|
import { hasProp, getComponent, getOptionProps, getSlot } from '../_util/props-util';
|
2020-10-12 05:27:16 +00:00
|
|
|
import { defineComponent } from 'vue';
|
2019-01-12 03:33:27 +00:00
|
|
|
function noop() {}
|
2020-10-12 05:27:16 +00:00
|
|
|
export default defineComponent({
|
2020-06-10 10:20:57 +00:00
|
|
|
name: 'Tooltip',
|
|
|
|
inheritAttrs: false,
|
2018-01-11 10:53:51 +00:00
|
|
|
props: {
|
2018-09-05 13:28:54 +00:00
|
|
|
trigger: PropTypes.any.def(['hover']),
|
2020-10-10 10:16:28 +00:00
|
|
|
defaultVisible: PropTypes.looseBool,
|
|
|
|
visible: PropTypes.looseBool,
|
2018-01-11 10:53:51 +00:00
|
|
|
placement: PropTypes.string.def('right'),
|
2019-01-12 03:33:27 +00:00
|
|
|
transitionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
2018-01-11 10:53:51 +00:00
|
|
|
animation: PropTypes.any,
|
|
|
|
afterVisibleChange: PropTypes.func.def(() => {}),
|
|
|
|
overlay: PropTypes.any,
|
|
|
|
overlayStyle: PropTypes.object,
|
|
|
|
overlayClassName: PropTypes.string,
|
|
|
|
prefixCls: PropTypes.string.def('rc-tooltip'),
|
|
|
|
mouseEnterDelay: PropTypes.number.def(0),
|
|
|
|
mouseLeaveDelay: PropTypes.number.def(0.1),
|
|
|
|
getTooltipContainer: PropTypes.func,
|
2020-10-10 10:16:28 +00:00
|
|
|
destroyTooltipOnHide: PropTypes.looseBool.def(false),
|
2020-03-07 11:45:13 +00:00
|
|
|
align: PropTypes.object.def(() => ({})),
|
2018-01-11 10:53:51 +00:00
|
|
|
arrowContent: PropTypes.any.def(null),
|
|
|
|
tipId: PropTypes.string,
|
|
|
|
builtinPlacements: PropTypes.object,
|
|
|
|
},
|
|
|
|
methods: {
|
2019-02-01 09:23:00 +00:00
|
|
|
getPopupElement() {
|
2019-01-12 03:33:27 +00:00
|
|
|
const { prefixCls, tipId } = this.$props;
|
|
|
|
return [
|
|
|
|
<div class={`${prefixCls}-arrow`} key="arrow">
|
2020-06-09 10:30:18 +00:00
|
|
|
{getComponent(this, 'arrowContent')}
|
2018-01-11 10:53:51 +00:00
|
|
|
</div>,
|
2018-09-05 13:28:54 +00:00
|
|
|
<Content
|
2019-01-12 03:33:27 +00:00
|
|
|
key="content"
|
2018-09-05 13:28:54 +00:00
|
|
|
trigger={this.$refs.trigger}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
id={tipId}
|
2020-06-09 10:30:18 +00:00
|
|
|
overlay={getComponent(this, 'overlay')}
|
2018-09-05 13:28:54 +00:00
|
|
|
/>,
|
2019-01-12 03:33:27 +00:00
|
|
|
];
|
2018-01-11 10:53:51 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
getPopupDomNode() {
|
|
|
|
return this.$refs.trigger.getPopupDomNode();
|
2018-01-11 10:53:51 +00:00
|
|
|
},
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
render(h) {
|
2018-01-11 10:53:51 +00:00
|
|
|
const {
|
2019-01-12 03:33:27 +00:00
|
|
|
overlayClassName,
|
|
|
|
trigger,
|
|
|
|
mouseEnterDelay,
|
|
|
|
mouseLeaveDelay,
|
|
|
|
overlayStyle,
|
|
|
|
prefixCls,
|
2018-01-11 10:53:51 +00:00
|
|
|
afterVisibleChange,
|
2019-01-12 03:33:27 +00:00
|
|
|
transitionName,
|
|
|
|
animation,
|
|
|
|
placement,
|
|
|
|
align,
|
2018-01-11 10:53:51 +00:00
|
|
|
destroyTooltipOnHide,
|
2019-01-12 03:33:27 +00:00
|
|
|
defaultVisible,
|
|
|
|
getTooltipContainer,
|
2018-01-11 10:53:51 +00:00
|
|
|
...restProps
|
2019-01-12 03:33:27 +00:00
|
|
|
} = getOptionProps(this);
|
|
|
|
const extraProps = { ...restProps };
|
2018-01-11 10:53:51 +00:00
|
|
|
if (hasProp(this, 'visible')) {
|
2019-01-12 03:33:27 +00:00
|
|
|
extraProps.popupVisible = this.$props.visible;
|
2018-01-11 10:53:51 +00:00
|
|
|
}
|
2020-06-09 10:30:18 +00:00
|
|
|
const { $attrs } = this;
|
2018-01-11 10:53:51 +00:00
|
|
|
const triggerProps = {
|
2020-06-09 10:30:18 +00:00
|
|
|
popupClassName: overlayClassName,
|
|
|
|
prefixCls,
|
|
|
|
action: trigger,
|
|
|
|
builtinPlacements: placements,
|
|
|
|
popupPlacement: placement,
|
|
|
|
popupAlign: align,
|
|
|
|
getPopupContainer: getTooltipContainer,
|
|
|
|
afterPopupVisibleChange: afterVisibleChange,
|
|
|
|
popupTransitionName: transitionName,
|
|
|
|
popupAnimation: animation,
|
|
|
|
defaultPopupVisible: defaultVisible,
|
|
|
|
destroyPopupOnHide: destroyTooltipOnHide,
|
|
|
|
mouseLeaveDelay,
|
|
|
|
popupStyle: overlayStyle,
|
|
|
|
mouseEnterDelay,
|
|
|
|
...extraProps,
|
|
|
|
...$attrs,
|
|
|
|
onPopupVisibleChange: $attrs.onVisibleChange || noop,
|
|
|
|
onPopupAlign: $attrs.onPopupAlign || noop,
|
2018-01-11 10:53:51 +00:00
|
|
|
ref: 'trigger',
|
2020-06-10 10:20:57 +00:00
|
|
|
popup: this.getPopupElement(),
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2020-06-18 10:51:56 +00:00
|
|
|
return <Trigger {...triggerProps}>{getSlot(this)[0]}</Trigger>;
|
2018-01-11 10:53:51 +00:00
|
|
|
},
|
2020-10-12 05:27:16 +00:00
|
|
|
});
|