@clownjs/mouse-menu v0.0.3

Mouse Menu

自定义菜单-VUE3组件/指令

特性

1. 默认封装成Vue指令
2. 支持自定义样式
3. 支持子菜单
4. 支持加入菜单图标
5. 支持移动端长按唤出菜单(v1.7.0后支持)

配置

Props/指令Value (Object)

menuList-菜单项数组配置

menuWrapperCss-菜单容器CSS设置

menuItemCss-菜单项CSS设置

以上涉及的CSS部分配置使用css3的css变量实现，若需兼容IE请自己定义样式表

Methods

若以组件方式使用，需要使用上方的show/close方法自行处理鼠标右键菜单行为

使用

1. 指令方式使用（推荐）

<template>
  <div v-mouse-menu="options">Dom</div>
</template>
<script>
import { MouseMenuDirective } from '@clownjs/mouse-menu';
export default {
  directive: {
    MouseMenu: MouseMenuDirective
  },
  setup() {
    return {
      options: {} // Some Options
    }
  }
}
</script>

2. 函数方式使用

<template>
  <div ref="dom" @contextmenu="showMenu">Dom</div>
</template>
<script>
import { ref } from 'vue'
import { CustomMouseMenu } from '@clownjs/mouse-menu';
export default {
  setup() {
    const dom = ref()
    const showMenu = (e) => {
      e.preventDefault()
      const MouseMenuCtx = CustomMouseMenu({
        el: dom.value,
        // Other Options
      })
      const { x, y } = e;
      MouseMenuCtx.show(x,y);
    }
    return {
      dom,
      showMenu
    }
  }
}

3. 组件方式使用

<template>
  <div ref="dom" @contextmenu="showMenu">Dom</div>
  <mouse-menu ref="mouseMenuEl" v-bind="options"></mouse-menu>
</template>
<script>
import { ref } from 'vue'
import MouseMenu from '@clownjs/mouse-menu';
export default {
  components: {
    MouseMenu
  },
  setup () {
    const dom = ref()
    const mouseMenuEl = ref()
    const showMenu = (e) => {
      e.preventDefault()
      const { x, y } = e;
      mouseMenuEl.value.show(x,y);
    }
    return {
      dom,
      mouseMenuEl,
      showMenu,
      options: {
        el: dom.value,
        // Other Options...
      } 
    }
  }
}
</script>

其他说明

为了性能，指令封装模式默认只对mounted钩子进行挂载。
当使用场景中有params参数传入菜单函数，有可能需要在组件更新时更新菜单，这时可以同时把update也挂载上。可参考以下写法:

import { MouseMenuDirective } from '@clownjs/mouse-menu';
export default {
  directive: {
    MouseMenu: {
      ...MouseMenuDirective,
      updated: MouseMenuDirective.mounted
    }
  }
}

• UMD Name: HowdyMouseMenu
• Example in ElementPlusTable: Demo