如何定位 VueJS 组件

Question

我有一份设计简报，要求我将红色组件（右边）移到左边的红色frame/shell（ ).

两个categories/sections来自一个REST-API，他们的children在一边。

[我试过的]

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

I couldn't find exactly where to position it. (in terms on Y axis)

[我想要什么]

我希望也许我可以使用 v-slot 在左侧创建一个 shell/frame，然后我在右侧模板化组件并将其生成到 shell/frame左侧。

如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

如果我没理解错的话，这就是你所需要的：
// 很抱歉 css，我只是不知道如何在 Whosebug 代码段框

中插入 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>

如何定位 VueJS 组件

How to position VueJS components

css

vue.js

vue-component

tailwind-css

v-slot