ant-design-vue/components/vc-tooltip/Tooltip.jsx

99 lines
3.0 KiB
Vue
Raw Normal View History

2018-03-19 02:16:27 +00:00
2018-03-14 06:28:54 +00:00
import PropTypes from '../_util/vue-types'
import Trigger from '../trigger'
2018-01-11 10:53:51 +00:00
import { placements } from './placements'
2018-03-26 04:18:06 +00:00
import { hasProp, getComponentFromProp, getOptionProps } from '../_util/props-util'
2018-01-12 08:10:41 +00:00
function noop () {}
2018-01-11 10:53:51 +00:00
export default {
props: {
2018-01-12 08:10:41 +00:00
trigger: PropTypes.any.def('hover'),
2018-01-11 10:53:51 +00:00
defaultVisible: PropTypes.bool,
visible: PropTypes.bool,
placement: PropTypes.string.def('right'),
transitionName: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
]),
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,
destroyTooltipOnHide: PropTypes.bool.def(false),
align: PropTypes.object.def({}),
arrowContent: PropTypes.any.def(null),
tipId: PropTypes.string,
builtinPlacements: PropTypes.object,
},
methods: {
getPopupElement (h) {
2018-01-18 02:43:39 +00:00
const { prefixCls, tipId } = this.$props
2018-01-11 10:53:51 +00:00
return ([
<div class={`${prefixCls}-arrow`} key='arrow'>
2018-01-18 02:43:39 +00:00
{getComponentFromProp(this, 'arrowContent')}
2018-01-11 10:53:51 +00:00
</div>,
<div class={`${prefixCls}-inner`} key='content' id={tipId}>
2018-01-18 02:43:39 +00:00
{getComponentFromProp(this, 'overlay')}
2018-01-11 10:53:51 +00:00
</div>,
])
},
getPopupDomNode () {
return this.$refs.trigger.getPopupDomNode()
},
},
render (h) {
const {
overlayClassName, trigger,
mouseEnterDelay, mouseLeaveDelay,
overlayStyle, prefixCls,
afterVisibleChange,
transitionName, animation,
placement, align,
destroyTooltipOnHide,
defaultVisible, getTooltipContainer,
...restProps
2018-03-26 04:18:06 +00:00
} = getOptionProps(this)
2018-01-11 10:53:51 +00:00
const extraProps = { ...restProps }
if (hasProp(this, 'visible')) {
extraProps.popupVisible = this.$props.visible
}
const triggerProps = {
props: {
popupClassName: overlayClassName,
prefixCls: prefixCls,
action: trigger,
builtinPlacements: placements,
popupPlacement: placement,
popupAlign: align,
getPopupContainer: getTooltipContainer,
afterPopupVisibleChange: afterVisibleChange,
popupTransitionName: transitionName,
popupAnimation: animation,
defaultPopupVisible: defaultVisible,
destroyPopupOnHide: destroyTooltipOnHide,
mouseLeaveDelay: mouseLeaveDelay,
popupStyle: overlayStyle,
mouseEnterDelay: mouseEnterDelay,
2018-03-26 04:18:06 +00:00
...extraProps,
2018-01-11 10:53:51 +00:00
},
on: {
2018-01-12 08:10:41 +00:00
popupVisibleChange: this.$listeners.visibleChange || noop,
popupAlign: this.$listeners.popupAlign || noop,
2018-01-11 10:53:51 +00:00
},
ref: 'trigger',
}
return (<Trigger {...triggerProps}>
<template slot='popup'>
{this.getPopupElement(h)}
</template>
{this.$slots.default}
</Trigger>)
},
}