前端经典样式参考

momomo_mocs

于 2024-12-06 21:00:25 发布

阅读量151

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/CSDN_WHB/article/details/144300367

版权

左边导航栏；右边展示区

<template>
  <h3>组件间通信方式使用-根目录</h3>
  <div class="navigate">
    <div class="navigateRegion">
      <p v-for="(navigateItem, idx) of navigaters" :key="idx">
          {{idx+1}}.<RouterLink :to="`${navigateItem.linkPath}`">{{navigateItem.title}}</RouterLink>
      </p>
    </div>
    <div class="showRegion">
        <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

let navigaters = reactive([
  {title:"PropsLearn", linkPath:"/props"},
  {title:"CustomEvent", linkPath:"/props"},
  {title:"Provide-Inject", linkPath:"/props"},
])
</script>

<style scoped>
.navigate {
  display: flex;
}
.navigateRegion {
  margin-left : 5px;
}
.showRegion {
    flex: 1;
    margin-left: 30px;
    padding: 5px;  /* 内边距 */
    background-color: #ade6cd60; /* 天蓝色背景 */
    border: 1px solid #000000; /* 黑色边框，可以根据需要调整颜色和宽度 */
}
</style>