Contextmenu 右键菜单

特性

1. 传入 menus 渲染菜单列表
2. 支持配置触发容器，通过传入 carrier 配置触发容器
3. 支持配置 icon
4. 基于 vue2 版本封装，强依赖于 element-ui
5. 可在非 TS 环境下正常使用，但需自行构建 jsx 环境(参考 babel-plugin-transform-vue-jsx (opens new window))。

基本用法

通过 menus 传入菜单，即可在右键点击指定区域展示菜单，通过 carrier 配置区域，该参数必须是有效的 CSS 选择器字符串

右键打开菜单

<template>
  <div class="carrier">
    <span>右键打开菜单</span>
    <niuka-contextmenu :menus="menus" @event="handleEvent"></niuka-contextmenu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        { icon: 'el-icon-edit', title: '编辑', event: 'edit' },
        { icon: 'el-icon-delete', title: '删除', event: 'delete' },
      ],
    };
  },
  methods: {
    handleEvent(e) {
      this.$message.info(`点击了${e.title}菜单`);
    },
  },
};
</script>

隐藏源代码

NiukaContextmenu Attributes

NiukaContextmenu Events

Menu Attributes