tangjinzhou
7 years ago
committed by
GitHub
1 changed files with 0 additions and 187 deletions
@ -1,187 +0,0 @@
|
||||
<script> |
||||
import { cloneElement, isValidElement, getClass, getStyle } from '../_util/vnode' |
||||
import RcTooltip from './src/Tooltip' |
||||
import getPlacements from './placements' |
||||
import PropTypes from '../_util/vue-types' |
||||
import { hasProp, getComponentFromProp } from '../_util/props-util' |
||||
import abstractTooltipProps from './abstractTooltipProps' |
||||
|
||||
const splitObject = (obj, keys) => { |
||||
const picked = {} |
||||
const omited = { ...obj } |
||||
keys.forEach(key => { |
||||
if (obj && key in obj) { |
||||
picked[key] = obj[key] |
||||
delete omited[key] |
||||
} |
||||
}) |
||||
return { picked, omited } |
||||
} |
||||
const props = abstractTooltipProps() |
||||
export default { |
||||
name: 'Tooltip', |
||||
props: { |
||||
...props, |
||||
title: PropTypes.any, |
||||
}, |
||||
model: { |
||||
prop: 'visible', |
||||
event: 'change', |
||||
}, |
||||
data () { |
||||
return { |
||||
sVisible: !!this.$props.visible, |
||||
} |
||||
}, |
||||
watch: { |
||||
visible (val) { |
||||
this.sVisible = val |
||||
}, |
||||
}, |
||||
methods: { |
||||
onVisibleChange (visible) { |
||||
if (!hasProp(this, 'visible')) { |
||||
this.sVisible = this.isNoTitle() ? false : visible |
||||
} |
||||
if (!this.isNoTitle()) { |
||||
this.$emit('change', visible) |
||||
} |
||||
}, |
||||
|
||||
getPopupDomNode () { |
||||
return this.$refs.tooltip.getPopupDomNode() |
||||
}, |
||||
|
||||
getPlacements () { |
||||
const { builtinPlacements, arrowPointAtCenter, autoAdjustOverflow } = this.$props |
||||
return builtinPlacements || getPlacements({ |
||||
arrowPointAtCenter, |
||||
verticalArrowShift: 8, |
||||
autoAdjustOverflow, |
||||
}) |
||||
}, |
||||
|
||||
isHoverTrigger () { |
||||
const { trigger } = this.$props |
||||
if (!trigger || trigger === 'hover') { |
||||
return true |
||||
} |
||||
if (Array.isArray(trigger)) { |
||||
return trigger.indexOf('hover') >= 0 |
||||
} |
||||
return false |
||||
}, |
||||
|
||||
// Fix Tooltip won't hide at disabled button |
||||
// mouse events don't trigger at disabled button in Chrome |
||||
// https://github.com/react-component/tooltip/issues/18 |
||||
getDisabledCompatibleChildren (ele) { |
||||
const isAntBtn = ele.componentOptions && ele.componentOptions.Ctor.options.__ANT_BUTTON |
||||
if (((isAntBtn && ele.componentOptions.propsData.disabled) || (ele.tag === 'button' && ele.data && ele.data.attrs.disabled !== false)) && this.isHoverTrigger()) { |
||||
// Pick some layout related style properties up to span |
||||
// Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254 |
||||
const { picked, omited } = splitObject( |
||||
getStyle(ele), |
||||
['position', 'left', 'right', 'top', 'bottom', 'float', 'display', 'zIndex'], |
||||
) |
||||
const spanStyle = { |
||||
display: 'inline-block', // default inline-block is important |
||||
...picked, |
||||
cursor: 'not-allowed', |
||||
} |
||||
const buttonStyle = { |
||||
...omited, |
||||
pointerEvents: 'none', |
||||
} |
||||
const spanCls = getClass(ele) |
||||
const child = cloneElement(ele, { |
||||
style: buttonStyle, |
||||
class: null, |
||||
}) |
||||
return ( |
||||
<span style={spanStyle} class={spanCls}> |
||||
{child} |
||||
</span> |
||||
) |
||||
} |
||||
return ele |
||||
}, |
||||
|
||||
isNoTitle () { |
||||
const { $slots, title } = this |
||||
return !$slots.title && !title |
||||
}, |
||||
|
||||
// 动态设置动画点 |
||||
onPopupAlign (domNode, align) { |
||||
const placements = this.getPlacements() |
||||
// 当前返回的位置 |
||||
const placement = Object.keys(placements).filter( |
||||
key => ( |
||||
placements[key].points[0] === align.points[0] && |
||||
placements[key].points[1] === align.points[1] |
||||
), |
||||
)[0] |
||||
if (!placement) { |
||||
return |
||||
} |
||||
// 根据当前坐标设置动画点 |
||||
const rect = domNode.getBoundingClientRect() |
||||
const transformOrigin = { |
||||
top: '50%', |
||||
left: '50%', |
||||
} |
||||
if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) { |
||||
transformOrigin.top = `${rect.height - align.offset[1]}px` |
||||
} else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) { |
||||
transformOrigin.top = `${-align.offset[1]}px` |
||||
} |
||||
if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) { |
||||
transformOrigin.left = `${rect.width - align.offset[0]}px` |
||||
} else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) { |
||||
transformOrigin.left = `${-align.offset[0]}px` |
||||
} |
||||
domNode.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}` |
||||
}, |
||||
}, |
||||
|
||||
render (h) { |
||||
const { $props, $data, $slots } = this |
||||
const { prefixCls, openClassName, getPopupContainer, getTooltipContainer } = $props |
||||
const children = ($slots.default || []).filter(c => c.tag || c.text.trim() !== '')[0] |
||||
let sVisible = $data.sVisible |
||||
// Hide tooltip when there is no title |
||||
if (!hasProp(this, 'visible') && this.isNoTitle()) { |
||||
sVisible = false |
||||
} |
||||
if (!children) { |
||||
return null |
||||
} |
||||
const child = this.getDisabledCompatibleChildren(isValidElement(children) ? children : <span>{children}</span>) |
||||
const childCls = { |
||||
[openClassName || `${prefixCls}-open`]: true, |
||||
} |
||||
const tooltipProps = { |
||||
props: { |
||||
...$props, |
||||
getTooltipContainer: getPopupContainer || getTooltipContainer, |
||||
builtinPlacements: this.getPlacements(), |
||||
visible: sVisible, |
||||
}, |
||||
ref: 'tooltip', |
||||
on: { |
||||
visibleChange: this.onVisibleChange, |
||||
popupAlign: this.onPopupAlign, |
||||
}, |
||||
} |
||||
return ( |
||||
<RcTooltip {...tooltipProps}> |
||||
<template slot='overlay'> |
||||
{getComponentFromProp(this, 'title')} |
||||
</template> |
||||
{sVisible ? cloneElement(child, { class: childCls }) : child} |
||||
</RcTooltip> |
||||
) |
||||
}, |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue