具有位置的Vue组件:绝对

Question

有一个Vue-component。这是一个包含一些内容的div。根据事件，必须将该元素放置在给定的坐标(相对于文档)。

我为它设定了样式：

return {
    position: "absolute",
    top: `${x}px`,
    left: `${y}px`,
};

但是，如果该元素的父元素之一具有position: relative，则位置计算相对于父元素，而不是文档。

我的解决方案:将元素移动到文档根。

mounted() {
    document.body.appendChild(this.$refs.container);
},

效果很好。但我有问题：

1. 只能用CSS解决这个问题吗？
2. 当我移动在Vue-template中呈现的元素时，会发生什么问题？
3. 有没有更好的解决办法？

Answer 1

您所拥有的是门户的一个很好的用例。它允许组件在某个位置存在，但模板在其他地方呈现。看看门户-vue

​

Vue.config.productionTip = false;
Vue.use(PortalVue);

Vue.component('MyComponent', {
  template: `
    <div>
      <h1>First</h1>
      <portal to="destination">
        <h1>Second</h1>
      </portal>

    </div>
  `,
});

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/portal-vue@2.1.5/dist/portal-vue.umd.min.js"></script>

<div id="app">
  <div class="portal-destination">
    <portal-target name="destination"></portal-target>
  </div>
  <div><my-component></my-component></div>
</div>

​