xiaoshi_system/src/utils/model/contextMenu/index.vue

<template>
  <div
    ref="myContextMenu"
    class="context-menu"
    v-show="contextMenu.displayContextMenu"
    :style="{
      left: contextMenu.clientX + 'px',
      top: contextMenu.clientY + 'px',
    }"
  >
  <div class="contentMenu">
    <!-- <div class="dropbtn" :style='{"background-color":mark.color,"border-radius":"50%","width":"12px","height":"12px","margin-top":"1px"}'>
        <el-input type="color" v-model="mark.color"  style="opacity: 0;user-select:none;" @input="changeColor()"/>
    </div> -->
    <div class="color_item" ref="context_menu_color" :style='{"background-color":contextMenu.mark.color}'>
        <el-input type="color" v-model="contextMenu.mark.color"  @input="changeColor()"/>
        <!-- <el-color-picker popper-class="menu_color" v-model="contextMenu.mark.color" size="mini" @change="changeColor"></el-color-picker> -->
    </div>
    <div 
        class="item"
        ref="context_menu_item"
        v-for="(item, i) in contextMenu.menuContent" 
        :key="i"
        :class="item.disabled ? 'disabled' : ''"
        @click="emitEvent(item.method)">
        {{ item.name }}
        </div>
  </div>
  </div>
</template>
    
<script>
  import { mapGetters } from "vuex";
export default {
  name: "ContextMenu",
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters(["contextMenu"]),
    displayContextMenu(){
        return this.$store.state.contextMenu.displayContextMenu
    }
  },
  watch:{
    displayContextMenu(val){
        if(val){
            this.$nextTick(()=>{
                var maxWidth = document.body.clientWidth
                var menuWidth = this.$refs.myContextMenu.clientWidth
                if(this.contextMenu.clientX + menuWidth > (maxWidth-10)){
                    this.$refs.myContextMenu.style.width = menuWidth + 'px'
                    this.contextMenu.clientX -= (this.contextMenu.clientX + menuWidth - maxWidth + 10)
                }
            }) 
        }else{
            this.$refs.myContextMenu.style.width = ''
        }
    }
  },
  mounted(){
    this.$nextTick(()=>{
        window.addEventListener('mousedown',(e)=>{
          var div = this.$refs.myContextMenu
          if(div && div.style && div.style.display!='none'){
            if (!div.contains(e.target)) {
              this.$store.commit("SET_CONTEXT_MENU", 
                {
                    displayContextMenu: false, 
                }
              )
            }
          }
        })
        window.addEventListener('beforeunload',(e)=>{
          this.$store.commit("SET_CONTEXT_MENU", 
                {
                    displayContextMenu: false, 
                }
              )
        })
    })
   
  },
  methods: {
    emitEvent(type) {
      this.$emit("operateDirectory", type);
      this.$store.commit("SET_CONTEXT_MENU", 
          {
            displayContextMenu: false, 
          }
      )
    },
    changeColor(){
        this.$emit("operateDirectory", 'changeColor');
    },
  },
  destroyed(){
    window.removeEventListener('mousedown',()=>{})
    window.removeEventListener('beforeunload',()=>{})
  }
};
</script>
  
<style lang="scss">
    .menu_color{
        .el-button--text{
            display: none;
        }
    }
    .context-menu{
        .el-color-picker__trigger{
            height: 22px;
            width: 22px;
            border:none;
            .el-color-picker__color{
                border-radius: 50%;
                border:none;
            }
        }
    }
</style>
<style lang="scss" scoped>
.context-menu {
    height: 30px;
  user-select:none;
  position: absolute;

  background: #fff;
  color: #34495e;
  min-width: 100px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  // cursor: pointer;
  // z-index: 998;
  .color_item{
    border-radius:50%;
    width:12px;
    height:12px;
    margin-top:1px;
    cursor: pointer;
  }
  .color_item>*{
    cursor: pointer;
    opacity: 0;
    user-select: none;
  }
  .contentMenu {
    text-align: center;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    // z-index: 9999999;
    .item {
      min-width: 54px !important;
      white-space: nowrap;
      padding: 3px 8px;
      font-size: 12px;
      list-style: none;
      display: inline-block;
      text-align-last: justify;
      justify-content: space-between;
      border-right:1px solid #E4E7ED;
      // z-index: 9999999;
      cursor: pointer;
      &:hover {
        background: #edf6ff;
      }
    }
    .item:last-child{
        border-right:none;
    }
    .disabled {
      color: #888585;
      pointer-events: none;
    }
  }
}

</style>