iview实现历史菜单鼠标右键操作

这个功能是仿照谷歌浏览器标签页,点击鼠标右键实现的各种操作,我这里写了五种.按照需求想弄多少就弄多少个;

第一步注册右键事件

               <Tag
                    type="dot"
                    closable
                    @contextmenu.prevent.native="preventEvent(item,$event)"
                    v-for="item in menuLogArr"
                    v-if="item.pathUrl!='/'"
                    :color="$route.path==item.pathUrl?'primary':'default'"
                    @click.native="getLogcheckMenu(item)"
                    :class="'tagsPageOpened'+item.id"
                    @on-close="closecheckMenu(item)"
                  >{{item.name}}</Tag>
                  
                  
                    preventEvent(item, e) {
                      this.preventEventObj = item;
                      this.visibleTag = true;
                      const offsetLeft = this.$el.getBoundingClientRect().left;
                      this.contextMenuLeft = e.clientX - offsetLeft + 10;
                      this.contextMenuTop = e.clientY;
                    },

@contextmenu.prevent.native="preventEvent(item,$event)"主要就是这一句了,其他的不用管,这是我们的一些业务需求

第二部内容部分

     <ul
         v-show="visibleTag"
         :style="{left: contextMenuLeft + 'px', top: contextMenuTop + 'px'}"
         class="contextmenuTag"
       >
         <li
           class="font-12 cursor padd-l-5 padd-r-5"
           v-for="(item, key) of menuList"
           @click="tagLogHandle(item)"
           :key="key"
         >{{item.label}}</li>
       </ul>
       
       
             menuList: [
                 {
                   label: "关闭其他所有标签页",
                   id: 1
                 },
                 {
                   label: "关闭全部标签页",
                   id: 2
                 },
                 {
                   label: "关闭右侧所有标签页",
                   id: 3
                 },
                 {
                   label: "关闭这个标签页",
                   id: 4
                 },
                 {
                   label: "关闭左侧所有标签页",
                   id: 5
                 }
               ],
               
               
                tagLogHandle(item) {
                 if (item.id == 1) {
                     ...
                 }else if(item.id ==2){
                     ...
                 }

第三步 一些简单的样式部分就没啥好说的了