settle_down_web/src/views/door/menu.vue

<template>
  <div class="door_menu">
    <div class="menu">
      <div :class="$route.path=='/workbench'?'active item':'item'" @click="$router.push('/workbench')">

          工作台</div>
      <div v-for="menu in menusShow" :key="menu.id" :class="currMenuId===menu.id?'active item':'item'" @click="menuSelect(menu)">{{ menu.name }}</div>
    </div>
    <el-popover
      v-if="menusPop.length>0"
      placement="bottom-end"
      trigger="click"
      width="88"
      popper-class="menuPopper"
      @hide="popoverImg=false"
      @show="popoverImg=true"
    >
      <div class="list">
        <div v-for="menu in menusPop" :key="menu.id" :class="currMenuId===menu.id?'active item':'item'" @click="menuSelect(menu)" @mouseover="menuMouseOver(menu)">{{ menu.name }}</div>
      </div>
      <img
        slot="reference"
        :src="popoverImg?require('./image/menu_1.png'):require('./image/menu.png')"
        alt=""
        style="vertical-align: middle;cursor: pointer"
      >
    </el-popover>
    <el-popover
      placement="bottom-end"
      popper-class="menuPopper"
      trigger="click"
      width="200"
    >
      <div class="list">
        <div :class="menuPopId==10?'active':''" class="item" @click="openUpdate" @mouseover="mouseoverFun(10)">密码修改</div>
        <div :class="menuPopId==11?'active':''" class="item" @mouseover="mouseoverFun(11)">版本：V1.0</div>
        <div :class="menuPopId==12?'active':''" class="item" @click="logOut" @mouseover="mouseoverFun(12)">退出系统</div>
      </div>
      <div slot="reference" class="user_info">
        <img alt="" class="head" src="./image/head.png">
        <div class="user_name">欢迎你，{{ user.truename }}！</div>
        <img alt="" src="./image/arrow.png">
      </div>
    </el-popover>
    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="true"
      :visible.sync="dialogPWDVisible"
      title="修改密码"
      top="60px"
      class="statistic_base"
      width="600px"
    >
      <update-password @closeUpdate="dialogPWDVisible = false" />
    </el-dialog>
  </div>
</template>
<script>
import UpdatePassword from '@/views/components/updatePassword'

import { mapGetters } from 'vuex'

export default {
    name: 'Door',
    components: {
        UpdatePassword
    },
    data() {
        return {
            dialogPWDVisible: false,
            user: this.$common.currUser() ? this.$common.currUser() : '',
            popoverImg: false,
            menuPopId: 0,

            menusShow: [],
            menusPop: [],
            menuShowNum: 7,
            currMenuId: ''
        }
    },
    computed: {
        ...mapGetters(['permission_menus'])
    },
    watch: {},
    mounted() {
        // console.log('user',this.user)
        this.$nextTick(() => {
            this.initMenus(this.permission_menus)
        })
    },
    methods: {
        initMenus: function(_menu) {
            this.menusShow = _menu.slice(0, this.menuShowNum)
            this.menusPop = _menu.slice(this.menuShowNum, _menu.length)
            var num = this.$route.query.menuIndex ? this.$route.query.menuIndex : 1
            var pass = 0
            for (var i = 0; i < this.menusShow.length; i++) {
                if (num == this.menusShow[i].id) {
                    num = i
                    pass = 1
                }
            }
            for (var i = 0; i < this.menusPop.length; i++) {
                if (num == this.menusPop[i].id) {
                    num = i
                    pass = 2
                }
            }
            if (pass == 1) {
                if (this.menusShow.length > 1) {
                    this.menuSelect(this.menusShow[num])
                }
            } else if (pass == 2) {
                this.menuSelect(this.menusPop[num])
            }
        },
        openUpdate: function() {
            this.dialogPWDVisible = true
        },

        closeUpdate: function() {
            this.dialogPWDVisible = false
        },
        logOut() {
            this.$router.push('/login')
        },
        mouseoverFun(num) {
            this.menuPopId = num
        },

        menuMouseOver(_menu) {
            if (_menu) {
                this.currMenuId = _menu.id
            }
        },
        menuSelect: function(_menu) {
            console.log(_menu)
            if (_menu) {
                this.currMenuId = _menu.id
                if (_menu.name === '首页') {
                    this.$router.push({ path: _menu.children[0].path })
                } else {
                    if (!_menu.children) {
                        this.$router.push({ path: _menu.page })
                    } else {
                        var num = this.$route.query.subMenu ? this.$route.query.subMenu : 0
                        for (var i = 0; i < _menu.children.length; i++) {
                            if (_menu.children[i].id == num) {
                                num = i
                            }
                        }
                        this.$emit('menuSelect', _menu, num)
                    }
                }
            }
        }
    }
}
</script>
<style lang="scss">
.door_menu {
	> div {
		display: inline-block;
		vertical-align: middle;
	}

	> img {
		vertical-align: middle;
	}

	// min-width: 1200px;
	.menu {
		margin-right: 10px;

		.item {
			display: inline-block;
			font-size: 16px;
			color: rgba(255, 255, 255, 0.8);
			line-height: 24px;
			padding: 0 10px 11px;
			cursor: pointer;
		}

		.item.active {
			color: #EC8F29;
			border-bottom: 2px solid #EC8F29;
            background: transparent !important;
		}
	}

	.search {
		width: 285px;
		height: 32px;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		border: 1px solid #FFFFFF;
		line-height: 32px;
		// position: relative;
		// top: 20px;
		margin-right: 52px;

		img {
			margin-left: 15px;
			margin-right: 8px;
			vertical-align: middle;
			position: relative;
			top: -2px;
		}

		.el-input {
			width: 80%;
			font-size: 16px;

			.el-input__inner {
				height: 30px;
				line-height: 30px;
				border: 0;
				background-color: inherit;
				padding: 0;
			}
		}
	}

	.user_info {
		height: 40px;
		background: rgba(255, 255, 255, 0.23);
		border-radius: 20px 20px 20px 20px;
		opacity: 1;
		border: 1px solid #FFFFFF;
		padding: 8px 16px;
		line-height: 1;
		cursor: pointer;
		margin-left: 10px;
		width: fit-content;
		display: inline-block;

		> div {
			display: inline-block;
			vertical-align: middle;
		}

		> img {
			vertical-align: middle;
		}

		.head {
			width: 25px;
			height: 25px;
			margin-right: 8px;
		}

		.user_name {
			font-size: 13px;
			color: #FFFFFF;
			line-height: 20px;
		}

		.user_role {
			font-size: 12px;
			color: rgba(255, 255, 255, 0.8);
			line-height: 14px;
		}
	}

	.logout {
		cursor: pointer;
	}

	.container {
		width: 1440px;
		margin: 0 auto;
		position: relative;
	}

}

.menuPopper {
	min-width: 0 !important;
    background: white !important;
    margin-top: 12px !important;
    .popper__arrow {
        display: block !important;
    }
	.list {
		.item {
			color: #666666 !important;
			font-size: 14px !important;
			padding: 5px 0 !important;
			cursor: pointer !important;
		}

		.active .el-upload--text,
		.active {
			color: #1F6AFF !important;
			text-decoration: underline !important;
		}

	}
}
</style>