例如Popover>content+button 渲染成 div>content+button 但是这个content 并不是根据 div来计算位置的导致部分情况下弹框定位错误,并不能总是跟随触发位置,望作者及时调整!
vhipe2zx1#
欢迎 pr。
nwwlzxa72#
遇到了相同的问题..整体偏左...Popover>dvi+div
piwo6bdm3#
我通过修改popover index.vue中init的代码,解决了偏移问题
`init (isReset) {const trigger = this.$refs.trigger.children[0]const parentTrigger = trigger.offsetParentconst popover = this.$refs.popoverswitch (this.placement) {case 'top' :this.position.left = trigger.offsetLeft + parentTrigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2this.position.top = trigger.getBoundingClientRect().top - popover.offsetHeight - this.gutterbreakcase 'left':this.position.left = trigger.offsetLeft + parentTrigger.offsetLeft - popover.offsetWidth - this.gutterthis.position.top = trigger.getBoundingClientRect().top + trigger.offsetHeight / 2 - popover.offsetHeight / 2breakcase 'right':this.position.left = trigger.offsetLeft + parentTrigger.offsetLeft + trigger.offsetWidth + this.gutterthis.position.top = trigger.getBoundingClientRect().top + trigger.offsetHeight / 2 - popover.offsetHeight / 2breakcase 'bottom':this.position.left = trigger.offsetLeft + parentTrigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2this.position.top = trigger.getBoundingClientRect().top + trigger.offsetHeight + this.gutterbreakdefault: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' } }
`
3条答案
按热度按时间vhipe2zx1#
欢迎 pr。
nwwlzxa72#
遇到了相同的问题..整体偏左...Popover>dvi+div
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
}
`