|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div
|
|
|
- v-show="visible"
|
|
|
+ v-show="visible && ready"
|
|
|
ref="root"
|
|
|
class="el-tree-select-dropdown"
|
|
|
:class="{ 'is-top': placement === 'top' }"
|
|
|
@@ -41,7 +41,8 @@ export default {
|
|
|
left: 0,
|
|
|
width: 0,
|
|
|
maxHeight: DEFAULT_MAX_HEIGHT,
|
|
|
- placement: 'bottom'
|
|
|
+ placement: 'bottom',
|
|
|
+ ready: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -70,10 +71,8 @@ export default {
|
|
|
},
|
|
|
watch: {
|
|
|
visible(val) {
|
|
|
- if (val) {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.mountToBody()
|
|
|
- })
|
|
|
+ if (!val) {
|
|
|
+ this.ready = false
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -94,9 +93,18 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
updatePosition(referenceEl) {
|
|
|
- if (!referenceEl || !this.visible) return
|
|
|
+ if (!referenceEl) return
|
|
|
+
|
|
|
+ // 每次打开重新取 z-index,避免刷新后提前挂载导致层级低于弹窗遮罩
|
|
|
+ this.zIndex = PopupManager.nextZIndex()
|
|
|
|
|
|
const rect = referenceEl.getBoundingClientRect()
|
|
|
+ // 参考节点尚未布局(如弹窗刚打开)时暂不展示,等下次定位
|
|
|
+ if (rect.width === 0 && rect.height === 0) {
|
|
|
+ this.ready = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
const viewportWidth = window.innerWidth
|
|
|
const viewportHeight = window.innerHeight
|
|
|
|
|
|
@@ -106,13 +114,15 @@ export default {
|
|
|
|
|
|
let left = rect.left
|
|
|
if (left + width > viewportWidth - VIEWPORT_PADDING) {
|
|
|
- left = Math.max(VIEWPORT_PADDING, viewportWidth - VIEWPORT_PADDING - width)
|
|
|
+ left = Math.max(
|
|
|
+ VIEWPORT_PADDING,
|
|
|
+ viewportWidth - VIEWPORT_PADDING - width
|
|
|
+ )
|
|
|
}
|
|
|
if (left < VIEWPORT_PADDING) {
|
|
|
left = VIEWPORT_PADDING
|
|
|
}
|
|
|
|
|
|
- // 下方空间不足时翻转到上方
|
|
|
const openToTop =
|
|
|
spaceBelow < MIN_HEIGHT ||
|
|
|
(spaceBelow < DEFAULT_MAX_HEIGHT && spaceAbove > spaceBelow)
|
|
|
@@ -138,6 +148,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
this.mountToBody()
|
|
|
+ this.ready = true
|
|
|
}
|
|
|
}
|
|
|
}
|