【Vue3+Element Plus】从0-1搭建后台管理系统(03)-Header-右侧

在这个项目中的Header右侧主要打算做以下功能：全局搜索、暗黑模式、多语言国际化、消息通知以及全屏功能和用户头像展示。而这一章主要的就是先对这些功能的进行静态渲染! 静态渲染! 静态渲染! 重要的事情说三遍，功能点后面逐个实现。

右侧的静态布局我选择使用HTML的ul>li列表进行渲染，可以轻松的控制它们之间相同的间距，通过弹性盒布局让ul里面的li在同一行内显示。

这里将右侧的每一个功能都拆分成了一个单独的组件，然后再在Nav.vue中引入进行渲染。

目录结构：

具体代码如下：

全局搜索Search.vue

layout/Header/components/Search.vue:

<template>
  <iconify-icon icon-name="fe:search"></iconify-icon>
</template>

<script setup lang="ts">
/** 引入iconify-icon */
import IconifyIcon from '@/components/Icon/IconifyIcon.vue'
defineOptions({
  name: 'Search'
})
</script>

<style lang="scss" scoped></style>

暗黑模式DarkMode.vue

layout/Header/components/DarkMode.vue:

<template>
  <el-switch
    v-model="darkMode"
    style="--el-switch-on-color: #0960bd; --el-switch-off-color: #f60"
    inline-prompt
    :active-icon="Moon"
    :inactive-icon="Sunny"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
/** 引入Element-Plus图标 */
import { Sunny, Moon } from '@element-plus/icons-vue'
defineOptions({
  name: 'DarkMode'
})

/** 是否切换暗黑模式 */
const darkMode = ref(false)
</script>

<style lang="scss" scoped></style>

国际化Language.vue

layout/Header/components/Language.vue:

<template>
  <!-- 中英文切换 -->
  <el-dropdown trigger="click">
    <span class="el-dropdown-link">中文</span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>中文</el-dropdown-item>
        <el-dropdown-item>English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Language'
})
</script>

<style lang="scss" scoped></style>

消息通知Message.vue

layout/Header/components/Message.vue:

<template>
  <iconify-icon icon-name="ant-design:bell-outlined"></iconify-icon>
</template>

<script setup lang="ts">
/** 引入iconify-icon */
import IconifyIcon from '@/components/Icon/IconifyIcon.vue'
defineOptions({
  name: 'Message'
})
</script>

<style lang="scss" scoped></style>

全屏FullScreen.vue

layout/Header/components/FullScreen.vue:

<template>
  <iconify-icon icon-name="icon-park:full-screen"></iconify-icon>
</template>

<script setup lang="ts">
/** 引入iconify-icon */
import IconifyIcon from '@/components/Icon/IconifyIcon.vue'
defineOptions({
  name: 'FullScreen'
})
</script>

<style lang="scss" scoped></style>

用户头像UserAvatar.vue

layout/Header/components/UserAvatar.vue:

<template>
  <!-- 用户头像 -->
  <el-avatar :size="35" :src="getImageUrl('logo.png')" />
  <!-- 用户信息 -->
  <el-dropdown trigger="click">
    <span class="el-dropdown-link">
      admin
      <el-icon class="el-icon--right">
        <iconify-icon icon-name="formkit:down"></iconify-icon>
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>仓库地址</el-dropdown-item>
        <el-dropdown-item>个人中心</el-dropdown-item>
        <el-dropdown-item divided>退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
/** 引入图片工具函数 */
import { getImageUrl } from '@/utils/index'
/** 引入iconify-icon */
import IconifyIcon from '@/components/Icon/IconifyIcon.vue'
defineOptions({
  name: 'UserAvatar'
})
</script>

<style lang="scss" scoped>
.nav-right__user {
  display: flex;
  align-items: center;

  i {
    font-size: 14px;
  }
}

.el-dropdown {
  color: $font-size-black;

  .el-dropdown-link {
    display: flex;
    align-items: center;
    margin-left: 5px;
  }
}
</style>