Vue开发前端导航栏设计【常见问题+示例代码】

原创

已于 2025-03-08 09:04:11 修改 · 1.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2025-03-06 20:59:16 首次发布

书接上回

上一次在文章中，我们讲解了Vue前端的容器搭建，在本文中，我们将继续细化设计，逐步完成一个较为完善的导航栏。

组件引用

组件引用是为了在较大规模开发时避免代码塞在一个文件里边，增加可读性。

在引用的主文件里的 js部分import,然后直接在 tmplate部分调用即可，代码如下

<template>
  <div>
    <navigator></navigator>
  </div>
</template>

<style scoped>

</style>

<script setup>
// 导入组件
import navigator from "@/page/navigator/navigator.vue"
</script>

在需要被调用的组件中，记得一定要有<script setup>部分

<template>
  <div class="navigator">

  </div>
</template>

<style scoped>

</style>

<script setup>

</script>

调试浏览器，发现调用成功

导航栏框架搭建

这里提供一个简单的导航栏框架设计，本文将详细讲解微调过程。

先展示初版效果：

提几个要点:

导航栏可以做个下端阴影，这样就算全白也会有区分度，看起来比较舒服
搜索框的border可以粗一点弄成圆的，用的element-plus组件所以需要使用::deep贯穿

<template>
  <div class="navigator">
    <div class="logo">
      <img src="../../asset/board/logo.png" style="height:400%;margin-top: -21%;margin-left: 15%;user-select: none;">
    </div>

    <div class="search">
      <el-input
          v-model="keyword"
          placeholder="请输入搜索内容"
          suffix-icon="Search"
          class="round-input"
          style="width:100%; height:60%; margin-top:3%">
      </el-input>
    </div>

    <div class="selectionSet">
      <el-tabs v-model="activeName" class="demo