vux Popover组件为何不根据该组件渲染出的div来定位

watbbzwu  于 2022-11-05  发布在  其他
关注(0)|答案(3)|浏览(231)

例如Popover>content+button 渲染成 div>content+button 但是这个content 并不是根据 div来计算位置的
导致部分情况下弹框定位错误,并不能总是跟随触发位置,望作者及时调整!

nwwlzxa7

nwwlzxa72#

遇到了相同的问题..整体偏左...Popover>dvi+div

piwo6bdm

piwo6bdm3#

我通过修改popover index.vue中init的代码,解决了偏移问题

`
init (isReset) {
const trigger = this.$refs.trigger.children[0]
const parentTrigger = trigger.offsetParent
const popover = this.$refs.popover
switch (this.placement) {
case 'top' :
this.position.left = trigger.offsetLeft + parentTrigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
this.position.top = trigger.getBoundingClientRect().top - popover.offsetHeight - this.gutter
break
case 'left':
this.position.left = trigger.offsetLeft + parentTrigger.offsetLeft - popover.offsetWidth - this.gutter
this.position.top = trigger.getBoundingClientRect().top + trigger.offsetHeight / 2 - popover.offsetHeight / 2
break
case 'right':
this.position.left = trigger.offsetLeft + parentTrigger.offsetLeft + trigger.offsetWidth + this.gutter
this.position.top = trigger.getBoundingClientRect().top + trigger.offsetHeight / 2 - popover.offsetHeight / 2
break
case 'bottom':
this.position.left = trigger.offsetLeft + parentTrigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
this.position.top = trigger.getBoundingClientRect().top + trigger.offsetHeight + this.gutter
break
default:
console.warn('Wrong placement prop')
}
if (!isReset) {
this.show = false
}

this.popoverStyle = {
    top: this.position.top + 'px',
    left: this.position.left + 'px',
    display: isReset ? this.popoverStyle.display : 'none'
  }
}

`

相关问题