1.横向竖向菜单模式切换功能

loulijun2021

2022-12-31 df744014031c57bf69fd1d94767a3c6e07f2ecb8

 src/layout/components/Navbar.vue

@@ -1,9 +1,42 @@
<template>
  <!--  <div class="navbar">-->
  <div class="navbar" :style="{background: $store.state.settings.headBackgroundColorValue? '#304156':'#fff'}">
    <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" />
      <breadcrumb
        class="breadcrumb-container"
        :style="{marginLeft:$store.state.settings.menuIsHorizontal?'20px':''}"
      />

      <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">

@@ -78,36 +111,31 @@
        </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'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
  components: {
    MenuItemEx,
    Breadcrumb,
    Hamburger,
    Search,
    Screenfull
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'device'
    ])
  },
  created() {
    this.usercode = getCookie('navTabId')
    this.username = getCookie('username')
  },
  data() {
    const validatePassword1 = (rule, value, callback) => {
@@ -150,7 +178,43 @@
      }
    }
  },
  created() {
    this.usercode = getCookie('navTabId')
    this.username = getCookie('username')
  },
  computed: {
    ...mapGetters([
      'sidebar',
      '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')
    },
@@ -174,7 +238,6 @@
            password: this.form.password,
            newpassword: this.form.newpassword
          }
          console.log(data)
          UpdateUserPassword(data).then(res => {
            if (res.code === '200') {
              this.$message.success('修改成功！')
@@ -192,9 +255,11 @@
  }
}
</script>

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

.navbar {
  height: 50px;
@@ -220,6 +285,30 @@

  .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 {
@@ -227,6 +316,7 @@
    height: 100%;
    line-height: 50px;
    display: flex;
    //min-width: 300px;

    &:focus {
      outline: none;
@@ -275,33 +365,12 @@
      }
    }
  }

  //.footerButton {
  //  display: flex;
  //  justify-content: end;
  //}
  //
  //::v-deep .el-button--primary {
  //  background-color: $main_color !important;
  //  height: 30px;
  //  display: flex;
  //  align-items: center;
  //  //border: 1px solid $main_color;
  //  border: none;
  //  padding: 0 20px;
  //}
  //
  //::v-deep .el-button--default {
  //  background-color: #ffffff !important;
  //  height: 30px;
  //  display: flex;
  //  align-items: center;
  //  padding: 0 20px;
  //}
  //
  //::v-deep .el-input__inner {
  //  height: 30px;
  //  line-height: 30px;
  //}
}
</style>
<style>
.el-menu--horizontal .el-menu {
  background-color: transparent !important;
  margin-top: -2px;
}

</style>