yvan-window/src/component/Container/Desktop/Menu/index.vue

<template>
  <!-- 打开的菜单图标显示区 -->
  <div class="menu sds-desktop">
    <ul class="menushow" v-if="menuList.length" :style="{height:height + 'px',marginTop:marginTop + 'px'}">
      <li :class="menu.spacialCls" v-for="(menu,menuIndex) in menuList" :key="menu.index" :style="{background:menu.backgroundColor}"
      @click="clickMenuItem(menu.id,menuIndex)">
        <div :class="menu.spacialCls" :style="{backgroundImage:`url(${menu.imgUrl})`}"></div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList:[],
      isHaveMenuItem: false,
      menuIndex: -1,
      height: 0,
      marginTop:0
    }
  },
  mounted() {
    this.$bus.on('clickShortcutItem',this.clickShortcutItem)
    this.$bus.on("changeDialogWindow",this.changeDialogWindow)
    this.$bus.on('closeDialogWindow',this.closeDialogWindow)
    this.$bus.on('showZindexMaxMenuItem',this.showZindexMaxMenuItem)
  },
  methods:{
    // 点击大图标打开小图标
    clickShortcutItem(obj){
      let id = obj.id 
      if(this.menuList.length  > 0){
        this.menuList.forEach(menu => {
          if (menu.id === id) {
              menu.backgroundColor = 'rgba(225,225,225,0.5)'
          } else {
              menu.backgroundColor = 'rgba(50,60,70,0.9)'
          }
        })
        if(this.menuList.length){
          this.isHaveMenuItem = this.menuList.some(menu => {
            return menu.id === id
          })
        }
      }
      if(!this.isHaveMenuItem){
        let menuItem = {
          id:new Date().getTime(),
          spacialCls:obj.spacialCls,
          imgUrl:obj.imgUrl,
          zIndex:obj.zIndex,
          title:obj.title,
          id: obj.id,
          backgroundColor:'rgba(225,225,225,0.5)'
        }
        this.menuList.push(menuItem)
      }
      this.$bus.emit('menuItemChanged',this.menuList)
      this.$bus.emit('changeDialogMenuWindow',id)
      this.height = document.documentElement.scrollHeight - (document.documentElement.scrollHeight % 70)
      this.marginTop = ((document.documentElement.scrollHeight - this.height) / 2 )
    },
    // 点击小图标切换弹出窗口
    clickMenuItem(id,menuIndex){
      this.menuList.forEach(menu => {
        menu.backgroundColor = 'rgba(50,60,70,0.9)'
      })
       this.menuList[menuIndex].backgroundColor = 'rgba(225,225,225,0.5)'
      // 打开个人设置页面
      if(id === 1111){
        this.$bus.emit('openUserSetting')
      }
    },
    // 点击弹出窗页面切换小图标选中状态
    changeDialogWindow(menu){
      if(typeof(menu) == 'string'){
        this.getMenuItem(menu)
        if(this.menuIndex != -1){
          this.menuList.forEach(menu => {
            menu.backgroundColor = 'rgba(50,60,70,0.9)'
          })
          this.menuList[this.menuIndex].backgroundColor = 'rgba(225,225,225,0.5)'
        }
      }else if (typeof(menu) == 'object'){
        this.getMenuItem(menu.id)
        this.menuList.forEach(menu => {
          menu.backgroundColor = 'rgba(50,60,70,0.9)'
        })
        if(this.menuIndex == -1){
          this.clickShortcutItem(menu)
        }else{
          this.menuList[this.menuIndex].backgroundColor = 'rgba(225,225,225,0.5)'
        }
        
      }
    },
    // 点击弹出窗页面叉号删去小图标
    closeDialogWindow(id){
      this.getMenuItem(id)
      this.menuList.splice(this.menuIndex,1)
      if(!this.menuList.length){
        this.isHaveMenuItem = false
      }else{
        let hasCheckedMenu = this.menuList.some(item=>{
          return item.backgroundColor == 'rgba(225,225,225,0.5)' 
        })
        if (!hasCheckedMenu){
          this.menuList[this.menuList.length - 1].backgroundColor = 'rgba(225,225,225,0.5)'
        }
      }
      this.height = document.documentElement.scrollHeight - (document.documentElement.scrollHeight % 70)
      this.marginTop = ((document.documentElement.scrollHeight - this.height) / 2 )
    },
    // 通过id获取对应的小图标下标
    getMenuItem(id){
      this.menuIndex = this.menuList.findIndex(item =>{
        return item.id === id
      })
    },
    // 显示zindex最大的menuItem
    showZindexMaxMenuItem(){
    }
  },
  beforeDestroy() {
    this.$bus.off('clickShortcutItem',this.clickShortcutItem)
    this.$bus.off("changeDialogWindow",this.changeDialogWindow)
    this.$bus.off('closeDialogWindow',this.closeDialogWindow)
  },
  name:'Menu',
  

}
</script>