позиционировать компонент поверх фиксированного app.vue

Question

У меня разделенная раскладка, как вы можете видеть на следующих примерах экранов. По умолчанию фиксированное содержимое приложения vue занимает 40% интерфейса слева, а маршрутизатор - 60% справа.

Теперь проблема: один из компонентов, в этом примере ссылка 3 маршрутизатора должна быть полноэкранной. Я не знаю, как компонент маршрутизатора может перекрывать приложение vue. Это всегда под ним.

маршрутизатор, ссылка 1:

маршрутизатор, ссылка 2:

маршрутизатор, ссылка 3:

Вот мой текущий код

app.vue:

<template>
<div class="left">
  <router-link to="/link1">
  <router-link to="/link2">
  <router-link to="/link3">
</div>

// some content

<router-view></router-view>
</template>

<style>
.left {
  width: 40%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

компонент 1 и 2:

<template>
  <div class="container">
  // same content
  </div>
</template>
<style>
.container {
  display: inline-block;
  margin-left: 40%;
  width: 60%;
  height: 100vh;
}
</style>

компонент 3:

<template>
  <div class="container">
  // same content
  </div>
</template>
<style>
.container {
  display: inline-block;
  width: 100%;
  height: 100vh;
}
</style>

Answer 1

Вы также должны иметь возможность использовать класс v-bind для применения класса к компоненту, уже отображенному на странице. Это дало бы результат, аналогичный тому, что вы видите в полностраничной опции редакторов WYSIWYG.

Answer 2

Вы можете использовать «position: absolute» в стиле для component3. Вы также можете дать ему более высокий z-индекс, чтобы он появился сверху. Например:

<template>
  <div class="container">
  // same content
  </div>
</template>
<style>
.container {
  display: inline-block;
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100vh;
}
</style>