1.优化浅色侧边栏bug

loulijun2021

2023-01-03 82a759b4c1dc81b0c78e13af19091c5a5012dd84

 src/layout/components/Navbar.vue

@@ -1,72 +1,273 @@
<template>
  <div class="navbar">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
  <div>
    <div
      class="navbar"
      :class="{'display_btw':$store.state.settings.menuIsHorizontal}"
      :style="{background: $store.state.settings.headBackgroundColorValue? '#304156':'#fff'}"
    >
      <hamburger
        v-if="!$store.state.settings.menuIsHorizontal"
        :is-active="sidebar.opened"
        class="hamburger-container"
        @toggleClick="toggleSideBar"
      />
      <breadcrumb
        class="breadcrumb-container"
        :style="{marginLeft:$store.state.settings.menuIsHorizontal?'20px':''}"
      />

    <breadcrumb class="breadcrumb-container" />
      <el-menu
        v-if="$store.state.settings.menuIsHorizontal"
        router
        class="menuHorizontal el-menu-demo"
        mode="horizontal"
        :default-active="activeMenu"
        :text-color="$store.state.settings.headBackgroundColorValue?'#fff':'#87909c'"
        :background-color="$store.state.settings.headBackgroundColorValue?variables.menuBg:'#fff'"
        :active-text-color="variables.menuActiveText"
        @select="handleSelect"
      >
        <!--        menu-trigger="click"-->
        <!--        :text-color="variables.menuText"-->
        <menu-item-ex
          v-for="route in permission_routes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>

    <div class="right-menu">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <!--          <router-link to="/">-->
          <!--            <el-dropdown-item>-->
          <!--              Home-->
          <!--            </el-dropdown-item>-->
          <!--          </router-link>-->
          <!--          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">-->
          <!--            <el-dropdown-item>Github</el-dropdown-item>-->
          <!--          </a>-->
          <!--          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
          <!--            <el-dropdown-item>Docs</el-dropdown-item>-->
          <!--          </a>-->
          <!--          divided-->
          <el-dropdown-item @click.native="logout">
            <span style="display:block;">退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="right-menu">

        <!--      <template v-if="device!=='mobile'">-->
        <template>
          <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">

              <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" />-->
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown" style="text-align: center">
            <!--          <router-link to="/">-->
            <!--            <el-dropdown-item>-->
            <!--              Home-->
            <!--            </el-dropdown-item>-->
            <!--          </router-link>-->
            <!--          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">-->
            <!--            <el-dropdown-item>Github</el-dropdown-item>-->
            <!--          </a>-->
            <!--          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
            <!--            <el-dropdown-item>Docs</el-dropdown-item>-->
            <!--          </a>-->
            <el-dropdown-item @click.native="editPassword">
              <span style="display:block;">修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">
              <span style="display:block;font-weight: bolder">退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-dialog
        title="修改密码"
        :visible.sync="dialogVisible"
        width="500px"
        :close-on-click-modal="false"
        @close="handleClose"
        @closed="handleClose"
      >
        <el-form ref="dialogForm" :rules="formRules" :model="form" label-width="100px">
          <!--        <el-form-item label="用户编码：">-->
          <!--          <div>{{ usercode }}</div>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="用户名称：">-->
          <!--          <div> {{ username }}</div>-->
          <!--        </el-form-item>-->
          <el-form-item label="原密码：" prop="password">
            <el-input v-model="form.password" style="width: 220px;" />
          </el-form-item>
          <el-form-item label="新密码：" prop="newpassword">
            <el-input v-model="form.newpassword" style="width: 220px;" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <div class="footerButton">
            <el-button @click="dialogVisibleCancel">返回</el-button>
            <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
          </div>
        </span>
      </el-dialog>

    </div>
  </div>

</template>

<script>
const SER_HZ = /^[\u4e00-\u9fa5]+$/
import { mapGetters } from 'vuex'
import MenuItemEx from './Sidebar/MenuItemEx'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import { getCookie } from '@/utils/auth'
import { UpdateUserPassword } from '@/api/user'
import Search from '@/components/HeaderSearch'
import Screenfull from '@/components/Screenfull'
import variables from '@/styles/variables.scss'

export default {
  components: {
    MenuItemEx,
    Breadcrumb,
    Hamburger
    Hamburger,
    Search,
    Screenfull
  },
  data() {
    const validatePassword1 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入原密码！'))
      } else {
        if (SER_HZ.test(value)) {
          return callback(new Error('密码不能为中文！'))
        } else {
          callback()
        }
      }
    }
    const validatePassword2 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入新密码！'))
      } else {
        if (SER_HZ.test(value)) {
          return callback(new Error('密码不能为中文！'))
        } else {
          callback()
        }
      }
    }
    return {
      usercode: '',
      username: '',
      form: {
        password: '',
        newpassword: ''
      },
      dialogVisible: false,
      formRules: {
        password: [
          { required: true, validator: validatePassword1, trigger: ['blur', 'change'] }
        ],
        newpassword: [
          { required: true, validator: validatePassword2, trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created() {
    this.usercode = getCookie('navTabId')
    this.username = getCookie('username')
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar'
    ])
      'avatar',
      'permission_routes'
    ]),
    routes() {
      return this.$router.options.routes
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      // const p = '/' + path.split('/')[1]
      // console.log(p)
      return path
    },
    variables() {
      console.log(variables, 2333)
      // 先输出这个variables值  然后修改其属性值
      variables.menuActiveText = this.$store.state.settings.theme
      // background: rgb(48, 65, 86);
      // variables.menuBg = this.$store.state.settings.headBackgroundColorValue && this.$store.state.settings.menuIsHorizontal ? `rgb(48,65,86)` : '#fff'
      return variables
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath)
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      this.$message.success('退出成功！')
      this.$router.push(`/login`)
    },
    editPassword() {
      this.dialogVisible = true
    },
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          const data = {
            usercode: this.usercode,
            username: this.username,
            password: this.form.password,
            newpassword: this.form.newpassword
          }
          UpdateUserPassword(data).then(res => {
            if (res.code === '200') {
              this.$message.success('修改成功！')
              this.dialogVisible = false
            }
          })
        }
      })
    },
    handleClose() {
      this.form.password = ''
      this.form.newpassword = ''
      this.$refs.dialogForm.clearValidate()
    }
  }
}
</script>

<style lang="scss" scoped>
.display_btw {
  display: flex;
  justify-content: space-between;
}

.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  //background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

  //background-color: #f8f8fa;

  .hamburger-container {
    line-height: 46px;
@@ -74,7 +275,7 @@
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, .025)
@@ -83,12 +284,38 @@

  .breadcrumb-container {
    float: left;
    width: 200px;
  }

  .menuHorizontal {
    display: flex !important;
    justify-content: center !important;

    ::v-deep .svg-icon {
      margin-right: 8px;
      //margin-left: 8px !important;
    }

    ::v-deep .el-submenu__title > span {
      //margin-right: 8px !important;
    }

    ::v-deep .submenu-title-noDropdown > span {
      //margin-right: 8px !important;
    }

    ::v-deep .el-submenu__icon-arrow {
      display: none;
    }

  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;
    display: flex;
    //min-width: 300px;

    &:focus {
      outline: none;
@@ -118,10 +345,11 @@
      .avatar-wrapper {
        margin-top: 5px;
        position: relative;
        cursor: pointer;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          width: 60px;
          height: 40px;
          border-radius: 10px;
        }
@@ -138,3 +366,10 @@
  }
}
</style>
<style>
.el-menu--horizontal .el-menu {
  background-color: transparent !important;
  margin-top: -2px;
}

</style>