TS使用 ‘vue-context-menu‘；右键打开菜单，内附安装流程-Toy模板网

这篇具有很好参考价值的文章主要介绍了TS使用 ‘vue-context-menu‘；右键打开菜单，内附安装流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.安装包

2.引入

import VueContextMenu from 'vue-context-menu';

 let VueContextMenu = require('vue-context-menu')

3.右击tree的节点发生的事件，阻止冒泡和默认事件，然后启用vue-contextMenu的方法

          <VueContextMenu id="context-menu" ref="ctxMenu" style="cursor: pointer">
            <li v-for="(menu, index) in rightMenus" :key="index" class="ttactheme_hover" style="padding-left: 5px" @click="onRightMenuChoose(menu)">
              <svg-icon :icon-class="getMenuIconByRightMenus(menu)" />
              <span style="margin-left: 3px">&nbsp;&nbsp;{{ menu }}</span>
            </li>
          </VueContextMenu>

枚举 i18里的数据：

//枚举
//存储名称（i18国际化）
enum rightMenus {
  addPeople = 'i18n.rightMenu_addPeople',
  addGroup = 'i18n.rightMenu_addCombination',
  saveAs = 'i18n.rightMenu_saveAs',
  rename = 'i18n.rightMenu_rename',
  edit = 'i18n.rightMenu_edit',
  delete = 'i18n.rightMenu_delete'
}

右键打开面板展示哪些数据的方法：

//右击菜单树，就是右击空白地方
 private onTreeRightClick(e: any) {
    //window.console.log('右击菜单树', e)
    e.stopPropagation()
    e.preventDefault()
    this.currentRightClickNode = null
    this.rightMenus = []
    this.rightMenus = [this.$t(rightMenus.addGroup).toString()]
    ;(this.$refs.ctxMenu as any).open()
  }




//右击菜单树节点
//el-tree上有个@node-contextmenu="onTreeNodeRightClick"
 private onTreeNodeRightClick(e: any, data: any) {
    // window.console.log('右击菜单树节点的节点数据', data)
    //禁止事件冒泡
    e.stopPropagation()
    //阻止默认事件执行
    e.preventDefault()
    //节点数据
    this.currentRightClickNode = data
    //清空数组
    this.rightMenus = []
    //如果点的用户
    if (data.type === 'people') {
      //只让 枚举数组里 放删除
      this.rightMenus = [this.$t(rightMenus.delete).toString()]
    } else if (data.type === 'group') {
      //添加部门的文字
      this.rightMenus = [this.$t(rightMenus.addGroup).toString(), 
      //添加人员的文字
      this.$t(rightMenus.addPeople).toString(), 
      //添加删除的文字
      this.$t(rightMenus.delete).toString()]
    }
    //通过$refs使用open方法打开框子
    ;(this.$refs.ctxMenu as any).open()
  }


//展示图标的方法
  private getMenuIconByRightMenus(rm: rightMenus): string {
    let iconString
    switch (rm) {
      case this.$t(rightMenus.addPeople).toString():
        iconString = 'rightmenu_add'
        break
      case this.$t(rightMenus.addGroup).toString(): {
        iconString = 'rightmenu_add'
        break
      }
      case this.$t(rightMenus.edit).toString():
        iconString = '&#xe628;'
        break
      case this.$t(rightMenus.saveAs).toString(): {
        iconString = '&#xe61a;'
        break
      }
      case this.$t(rightMenus.rename).toString(): {
        iconString = '&#xe628;'
        break
      }
      case this.$t(rightMenus.delete).toString(): {
        iconString = 'rightmenu_delete'
        break
      }
      default:
        break
    }
    return iconString
  }


//点击menu的数据，进行增删改查的操作
 private async onRightMenuChoose(menuName: string) {
    //window.console.log('onRightMenuChoose:', menuName)
    switch (menuName) {
      case this.$t(rightMenus.addPeople).toString():
        this.addPeople()
        break
      case this.$t(rightMenus.addGroup).toString():
        this.addGroup()
        break
      case this.$t(rightMenus.delete).toString():
        this.deleteNode()
        this.onDeletePage(this.currentRightClickNode.id)
        break
      case this.$t(rightMenus.edit).toString():
        this.onEditPage(this.currentRightClickNode.id)
        break
      default:
        break
    }
  }

安装使用vue-context-menu流程文章来源地址https://www.toymoban.com/news/detail-840373.html

1.首先，安装vue-context-menu包：
npm install vue-context-menu
在Vue组件中引入vue-context-menu：
typescript
import VueContextMenu from 'vue-context-menu';

export default {
  components: {
    VueContextMenu,
  },
  // ...
}

2。在模板中使用vue-context-menu组件，并定义菜单项：
html
<template>
  <div>
    <vue-context-menu :menu-items="menuItems">
      <div>右键点击我</div>
    </vue-context-menu>
  </div>
</template>

3.在Vue组件的data中定义菜单项：
typescript
export default {
  data() {
    return {
      menuItems: [
        { label: '菜单项1', action: this.handleMenuItem1 },
        { label: '菜单项2', action: this.handleMenuItem2 },
        // ...
      ],
    };
  },
  methods: {
    handleMenuItem1() {
      // 处理菜单项1的点击事件
    },
    handleMenuItem2() {
      // 处理菜单项2的点击事件
    },
    // ...
  },
  // ...
}
根据需要，可以在methods中定义处理菜单项点击事件的方法。

到了这里，关于TS使用 ‘vue-context-menu‘；右键打开菜单，内附安装流程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！