ant-design-vue/components/trigger/Popup.vue
2018-01-11 18:53:51 +08:00

213 lines
5.5 KiB
Vue

<script>
import PropTypes from '../_util/vue-types'
import Align from '../align'
import PopupInner from './PopupInner'
import LazyRenderBox from './LazyRenderBox'
export default {
props: {
visible: PropTypes.bool,
getClassNameFromAlign: PropTypes.func,
getRootDomNode: PropTypes.func,
align: PropTypes.any,
destroyPopupOnHide: PropTypes.bool,
prefixCls: PropTypes.string,
getContainer: PropTypes.func,
transitionName: PropTypes.string,
animation: PropTypes.any,
maskAnimation: PropTypes.string,
maskTransitionName: PropTypes.string,
mask: PropTypes.bool,
zIndex: PropTypes.number,
popupClassName: PropTypes.any,
},
data () {
return {
destroyPopup: false,
initAlign: false, // mounted之后再实例化align,即改变this.$el位置后实例化
}
},
mounted () {
this.rootNode = this.getPopupDomNode()
this._container = this.getContainer()
this._container.appendChild(this.$el)
this.$nextTick(() => {
this.initAlign = true
})
},
beforeDestroy () {
this.$el.remove()
},
watch: {
visible (val) {
if (val) {
this.destroyPopup = false
}
},
initAlign (val) {
if (val) {
this.$nextTick(() => {
this.$refs.alignInstance.forceAlign()
})
}
},
},
methods: {
onAlign (popupDomNode, align) {
const props = this.$props
const currentAlignClassName = props.getClassNameFromAlign(align)
if (this.currentAlignClassName !== currentAlignClassName) {
popupDomNode.className = popupDomNode.className.replace(this.currentAlignClassName, currentAlignClassName)
this.currentAlignClassName = currentAlignClassName
}
this.$emit('align', popupDomNode, align)
},
getPopupDomNode () {
return this.$refs.popupInstance ? this.$refs.popupInstance.$el : null
},
getTarget () {
return this.$props.getRootDomNode()
},
getMaskTransitionName () {
const props = this.$props
let transitionName = props.maskTransitionName
const animation = props.maskAnimation
if (!transitionName && animation) {
transitionName = `${props.prefixCls}-${animation}`
}
return transitionName
},
getTransitionName () {
const props = this.$props
let transitionName = props.transitionName
if (!transitionName && typeof props.animation === 'string') {
transitionName = `${props.animation}`
}
return transitionName
},
getClassName (currentAlignClassName) {
return `${this.$props.prefixCls} ${this.$props.popupClassName} ${currentAlignClassName}`
},
onMouseEnter (e) {
this.$emit('mouseenter', e)
},
onMouseLeave (e) {
this.$emit('mouseleave', e)
},
afterLeave (el) {
if (this.destroyPopupOnHide) {
this.destroyPopup = true
}
},
getPopupElement () {
const { $props: props, onMouseEnter, onMouseLeave, $slots } = this
const { align, visible, prefixCls, animation } = props
this.currentAlignClassName = this.currentAlignClassName || props.getClassNameFromAlign(align)
const className = this.getClassName(this.currentAlignClassName)
// const hiddenClassName = `${prefixCls}-hidden`
if (!visible) {
this.currentAlignClassName = null
}
// visible = true
const popupInnerProps = {
props: {
prefixCls,
visible,
},
class: `${className}`,
on: {
mouseenter: onMouseEnter,
mouseleave: onMouseLeave,
},
ref: 'popupInstance',
style: { ...this.getZIndexStyle() },
}
const transitionProps = {
props: Object.assign({
appear: true,
}, typeof animation === 'object' ? animation : { name: this.getTransitionName() }),
}
return (<transition
{...transitionProps}
onAfterLeave={this.afterLeave}
>
<Align
v-show={visible}
target={this.getTarget}
key='popup'
ref='alignInstance'
monitorWindowResize
disabled={!visible}
align={align}
onAlign={this.onAlign}
>
<PopupInner
{...popupInnerProps}
>
{$slots.default}
</PopupInner>
</Align>
</transition>)
},
getZIndexStyle () {
const style = {}
const props = this.$props
if (props.zIndex !== undefined) {
style.zIndex = props.zIndex
}
return style
},
getMaskElement () {
const props = this.$props
let maskElement
if (props.mask) {
const maskTransition = this.getMaskTransitionName()
maskElement = (
<LazyRenderBox
v-show={props.visible}
style={this.getZIndexStyle()}
key='mask'
class={`${props.prefixCls}-mask`}
visible={props.visible}
/>
)
if (maskTransition) {
maskElement = (
<transition
appear
name={maskTransition}
>
{maskElement}
</transition>
)
}
}
return maskElement
},
},
render () {
const { destroyPopup, getMaskElement, getPopupElement, initAlign } = this
return (
<div style='position: absolute; top: 0px; left: 0px; width: 100%;'>
{initAlign ? (
getMaskElement(),
destroyPopup
? null : getPopupElement()
) : null }
</div>
)
},
}
</script>