鼠标相关的一些事件

鼠标右键： @contextmenu.prevent=”handleMemberEditShow(index, $event)”

鼠标移入移出事件：大佬原博

1.mouseover 和 mouseout

2.mouseenter 和 mouseleave

1.mouseover 和 mouseout：根据鼠标事件的target进行触发，是一种精确触发。

当为某一组件(如div或ul)设置这两个事件时，当事件的target是该组件时，就会触发mouseover，但是当鼠标划到该组件的子组件上时，因为target改变了，所以就触发了 mouseout 事件，这往往就会造成页面元素的闪烁。
在实际开发过程中，更多的是针对范围的操作。如果鼠标在某个组件(如div)范围内就触发进入组件的操作，如果离开这个组件的页面范围，就触发离开的事件。

2.mouseenter 和 mouseleave：根据组件在页面的范围(坐标)进行触发的。

不管组件中是否有子组件，只要鼠标进入到组件的范围内，就可以触发mouseenter事件，离开范围，则触发mouseleave事件。

鼠标右键（案例：鼠标右键弹出编辑删除，再次右键隐藏）

要求：右键小盒子出现，再次右键小盒子消失。

思路：当memberIndex与当前index相同时，让小盒子出现，否则隐藏。

遍历每个li，右键时传递当前点击的li的index,让this.memberIndex = index，两者相同盒子出现。再次点击时让 this.memberIndex = -1，两者不相同，盒子消失

  
  
    <ul style="padding-right: 9px; height: 175px; overflow: auto">
            <li
              v-for="(user, index) in userList"
              :key="user.id"
              :class="memberIndex === index ? 'teamactive' : ''"
              @contextmenu.prevent="handleMemberEditShow(index, $event)"
              @mouseleave="hiddenBox2"
            >
              <div>
                {{ user.name.slice(0, 1) }}
              </div>
              <div>
                {{ user.name }}
              </div>
              <div
                style="font-size: 14px; color: #2864d7; float: right"
              >
                {{ user.role }}
              </div>
              <div
                class="deatils"
                :class="
                  memberIndex === index && myrole == '组长'
                    ? 'active'
                    : 'hidden'
                ">
                <div @click="deleteMember(user)" >
                  移除
                </div>
                <div @click="setLeader(user)">
                  设为副组长
                </div>
              </div>
            </li>
          </ul>
          
   data() {
      return {
        memberIndex: -1,
      }
    },
                  
      handleMemberEditShow(index, e) {
        if (index != this.memberIndex) {
          this.memberIndex = index
        } else {
          this.memberIndex = -1
        }
      },

鼠标移入移出（鼠标移除当前li后，盒子消失）

还是这个案例，如果用mouseout，点击编辑时，因为进入了子组件，会被认为鼠标离开，因此盒子消失，因此这里应该使用mouseleave

           <li
              v-for="(user, index) in userList"
              :key="user.id"
              :class="memberIndex === index ? 'teamactive' : ''"
              @contextmenu.prevent="handleMemberEditShow(index, $event)"
              @mouseleave="hiddenBox2"
            >
 
       hiddenBox2() {
        this.memberIndex = -1
      },