rongxing-vue/src/views/main-navbar.vue

<template>
  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
        <el-menu
          class="site-navbar__menu"
          mode="horizontal">
          <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
            <icon-svg name="zhedie"></icon-svg>
          </el-menu-item>
        </el-menu>
        <a class="site-navbar__brand-lg" href="javascript:;" >{{$t('commonSystemName')}}</a>
        <a class="site-navbar__brand-mini" href="javascript:;">{{$t('commonAbbreviation')}}</a>
      </h1>
    </div>
    <div class="site-navbar__body clearfix">
<!--      <el-menu-->
<!--        class="site-navbar__menu"-->
<!--        mode="horizontal">-->
<!--        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">-->
<!--          <icon-svg name="zhedie"></icon-svg>-->
<!--        </el-menu-item>-->
<!--      </el-menu>-->

      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal">


        <el-submenu index="2">
          <template slot="title">设置</template>
          <el-submenu index="2-1" >
            <template slot="title">语言设置</template>
            <el-menu-item  index="2-1-1" @click.native="switch_the_language('cn')">{{$t('lange.cn')}}</el-menu-item>
            <el-menu-item index="2-1-2" @click.native="switch_the_language('en')">{{$t('lange.en')}}</el-menu-item>
            <el-menu-item index="2-1-3" @click.native="switch_the_language('jp')">{{$t('lange.jp')}}</el-menu-item>
            <el-menu-item index="2-1-4" @click.native="switch_the_language('kr')">{{$t('lange.kr')}}</el-menu-item>
          </el-submenu>
          <el-submenu index="2-2">
            <template slot="title">用户设置</template>
            <el-menu-item index="2-2-1" @click.native="updatePasswordHandle()">修改密码</el-menu-item>
            <el-menu-item index="2-2-2" @click.native="updateLanguageHandle()">修改默认语言</el-menu-item>

          </el-submenu>
          <el-menu-item index="2-3" @click="$router.push({ name: 'theme' })">主题设置</el-menu-item>
        </el-submenu>
        <el-menu-item class="site-navbar__avatar" index="3">
                    <el-dropdown :show-timeout="0" placement="bottom">
                      <span class="el-dropdown-link">
                        <img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }}
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
        </el-menu-item>
      </el-menu>

<!--      <el-menu-->
<!--        class="site-navbar__menu site-navbar__menu&#45;&#45;right"-->
<!--        mode="horizontal">-->

<!--        <el-menu-item index="1">-->
<!--          <el-dropdown :show-timeout="0" placement="bottom">-->
<!--            <span class="el-dropdown-link">-->
<!--               &lt;!&ndash; 注2：在按钮中，加入单击事件，事件指向语言切换函数 &ndash;&gt;-->
<!--            {{$t('language.name')}}-->
<!--            </span>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item @click.native="switch_the_language('cn')">{{$t('lange.cn')}}</el-dropdown-item>-->
<!--              <el-dropdown-item @click.native="switch_the_language('en')">{{$t('lange.en')}}</el-dropdown-item>-->
<!--              <el-dropdown-item @click.native="switch_the_language('jp')">{{$t('lange.jp')}}</el-dropdown-item>-->
<!--              <el-dropdown-item @click.native="switch_the_language('kr')">{{$t('lange.kr')}}</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->

<!--        </el-menu-item>-->

<!--        <el-menu-item index="1" @click="$router.push({ name: 'theme' })">-->
<!--          <template slot="title">-->
<!--            <el-badge value="new">-->
<!--              <icon-svg name="shezhi" class="el-icon-setting"></icon-svg>-->
<!--            </el-badge>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item class="site-navbar__avatar" index="3">-->
<!--          <el-dropdown :show-timeout="0" placement="bottom">-->
<!--            <span class="el-dropdown-link">-->
<!--              <img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }}-->
<!--            </span>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>-->
<!--              <el-dropdown-item @click.native="updateLanguageHandle()">修改默认语言</el-dropdown-item>-->
<!--              <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
<!--        </el-menu-item>-->
<!--      </el-menu>-->
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
    <update-language v-if="updateLanguageVisible" ref="updateLanguage"></update-language>

  </nav>
</template>

<script>
  import UpdatePassword from './main-navbar-update-password'
  import UpdateLanguage from './main-navbar-update-language'
  import {clearLoginInfo} from '@/utils'

  export default {
    data() {
      return {
        updatePassowrdVisible: false,
        updateLanguageVisible: false,
        message: this.$t('language.name')
      }
    },
    components: {
      UpdatePassword,
      UpdateLanguage
    },
    computed: {
      navbarLayoutType: {
        get() {
          return this.$store.state.common.navbarLayoutType
        }
      },
      sidebarFold: {
        get() {
          return this.$store.state.common.sidebarFold
        },
        set(val) {
          this.$store.commit('common/updateSidebarFold', val)
        }
      },
      mainTabs: {
        get() {
          return this.$store.state.common.mainTabs
        },
        set(val) {
          this.$store.commit('common/updateMainTabs', val)
        }
      },
      userName: {
        get() {
          return this.$store.state.user.name
        }
      }
    },
    methods: {
      // 注3：增加语言切换函数
      switch_the_language(val) {
        localStorage.setItem('locale', val)
        location.reload()
      },
      // 修改密码
      updatePasswordHandle() {
        this.updatePassowrdVisible = true
        this.$nextTick(() => {
          this.$refs.updatePassowrd.init()
        })
      },
      // 修改用户默认语言
      updateLanguageHandle(){
        this.updateLanguageVisible = true
        this.$nextTick(() =>{
          this.$refs.updateLanguage.init()
        })
      },
      // 退出
      logoutHandle() {
        this.$confirm(`确定进行[退出]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/logout'),
            method: 'post',
            data: this.$http.adornData()
          }).then(({data}) => {
            if (data && data.code === 0) {
              clearLoginInfo()
              this.$router.push({name: 'login'})
            }
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="scss">
  .icon-svg {
    width: 2em;
  }
  .el-menu--collapse .el-menu .el-submenu, .el-menu--popup, .el-menu-item{
    min-width: 50px!important;
  }

  .site-navbar__brand-lg, .site-navbar__brand-mini {
    margin: 0 5px;
    color: #fff;
    margin-left: -45px;
  }


</style>