1.面包屑右上角新增搜索菜单功能

loulijun2021

2022-12-20 76aaf921dc755e0f095e62344bed659da86e7070

 src/layout/components/Navbar.vue

@@ -5,12 +5,27 @@
    <breadcrumb class="breadcrumb-container" />

    <div class="right-menu">

      <template v-if="device!=='mobile'">
        <search id="header-search" class="right-menu-item" />

        <!--        <error-log class="errLog-container right-menu-item hover-effect" />-->

        <!--        <screenfull id="screenfull" class="right-menu-item hover-effect" />-->

        <!--        <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
        <!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
        <!--        </el-tooltip>-->

      </template>

      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <!--          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
          <div style="display: flex;align-items: center;margin-top: -5px">
            <div class="headerImg"><i class="el-icon-user" /></div>
            <div class="headerName">{{ username }}</div>

            <i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7" />
            <div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA">{{ username }}</div>
          </div>

          <!--          <i class="el-icon-caret-bottom" />-->
@@ -74,17 +89,20 @@
import Hamburger from '@/components/Hamburger'
import { getCookie } from '@/utils/auth'
import { UpdateUserPassword } from '@/api/user'
import Search from '@/components/HeaderSearch'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
  components: {
    Breadcrumb,
    Hamburger
    Hamburger,
    Search
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar'
      'avatar',
      'device'
    ])
  },
  created() {
@@ -206,6 +224,7 @@
    float: right;
    height: 100%;
    line-height: 50px;
    display: flex;

    &:focus {
      outline: none;
@@ -236,14 +255,6 @@
        margin-top: 5px;
        position: relative;
        cursor: pointer;

        .headerImg {
          margin: 5px;
        }

        .headerName {
          font-weight: bolder;
        }

        .user-avatar {
          cursor: pointer;