如何定位 VueJS 组件

Posted 2023-02-23

【中文标题】如何定位 VueJS 组件

【英文标题】：How to position VueJS components

【发布时间】：2021-03-16 06:54:39

【问题描述】：

我有一个设计简介，要求我将红色组件（右侧）移动到红色框架/外壳（左侧）。

这两个类别/部分来自一个 REST-API，他们的孩子就在旁边。

[我试过的]

我尝试将红色组件定位为绝对，但问题是如果它上面的组件内容增长。这两个组件将重叠。

我找不到确切的位置。 （在 Y 轴上）

[我想要什么]

我希望也许我可以使用v-slot 在左侧创建一个外壳/框架，然后我将右侧的组件模板化并将其生成给左侧的外壳/框架。

任何帮助将不胜感激。

提前致谢。

【参考方案1】：

如果我理解正确，那就是你需要的： // 对不起纯css，我只是不知道如何在*** sn-p框中插入scss

const btn = document.querySelector('button')
const grid = document.querySelector('.grid')

btn.onclick = () => grid.classList.toggle('replaced')

.grid 
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  column-gap: 20px;
  row-gap: 20px;


div 
  background: black;


div:nth-child(1) 
  order: 10;


div:nth-child(2) 
  order: 20;


div:nth-child(3) 
  order: 30;


div:nth-child(4) 
  order: 40;
  background: red;


.replaced div:nth-child(4) 
  order: 11;

<main class="grid replaced">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>


<button>toggle</button>

【讨论】：

感谢您的回答，很遗憾您错过了一件事。我不想删除正确的部分。我只想移动红色元素。让其他人保持原样。

再看那张图片，红色填充的正方形必须移动到红色框（红色边框的正方形）。不过，我真的很感谢你的努力。

@chawila 在一张图片中你有 4 个矩形，在另外 2 个中，当你移动正方形时剩下的应该怎么办？

右边剩下的三个应该不会发生任何事情。他们应该保持原样。注意：左边的红框只是一个占位符。