Question

我有一个简单的popover组件，它在dom中抓取其父级的位置，然后将其自身升级到document.body并绝对定位。

当我使用v-show显示和隐藏组件时，这一切都很有效，但是如果我尝试使用v-if，它会抱怨这个。$ el.parentElement为null。

根据documentation，当调用mount（）时，$ el应该在文档中，但是当它通过v-if有条件地呈现时，它似乎不是这种情况。。

我已尝试使用nextTick，但这也无济于事。

我做错了吗？

这是我的组件的代码：

<template>
<div class="popover"><slot ></slot></div>
</template>

<script>
export default {
    name: 'pop-over',
    props: ['position', 'anchor', 'offset'],
    methods: {

    },
    mounted() {
        let rect = {};
        let parent = this.$el.parentElement;
        document.body.appendChild(this.$el);

        let offset = {
            x: this.offset ? this.offset.x || 0 : 0,
            y: this.offset ? this.offset.y || 0 : 0
        }


        if (this.position) {
            rect = {
                top: this.position.top,
                left: this.position.left
            }
        } else {
            rect = parent.getBoundingClientRect();
            rect = {
                top: rect.top + window.scrollY,
                left: rect.left + window.scrollX,
                bottom: window.innerHeight - rect.bottom - + window.scrollY,
                right: window.innerWidth - rect.right + window.scrollX
            }
        }


        this.$el.style.left = (rect.left + offset.x) + 'px';

        if (this.anchor == 'below') {
            this.$el.style.top = (rect.top + offset.y) + 'px';
        } else {
            this.$el.style.bottom = (rect.bottom + offset.y) + 'px';
        }
    }
}
</script>

Answer 1

我在实现弹出窗口时遇到了同样的问题。最后，通过以下代码解决：

let elParent = this.$el.parentNode;

if (!elParent) {
  let parent = this.$parent;
  while (parent && parent.$el === this.$el) {
    parent = parent.$parent;
  }

  if (parent) {
    parent.$el.appendChild(this.$el);
    elParent = parent.$el;
  }
}

所以我做的是在v-if=true之后渲染时重新建立dom关系。

当组件通过v-if

1 个答案: