Question

有一个Vue组件。它包含一些内容。根据事件，此元素必须放置在给定的坐标（相对于文档）处。

我为此设置了样式：

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

但是，如果此元素的父项之一为position: relative，则相对于父项而非文档计算位置。

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

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

效果很好。但是我有问题：

只能使用CSS来解决吗？
移动在Vue模板中渲染的元素会发生什么问题？
有更好的解决方案吗？

Answer 1

您拥有的是门户的绝佳用例。它允许组件存在于某个位置，但是模板可以在其他位置呈现。看看portal-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>

Vue组件的位置：绝对

1 个答案: