Mouse Menu

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

特性

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

配置

Props/指令Value (Object)

|参数|说明|类型|可选值|默认值| |:---|:---|:---|:---|:---| |el|触发的Dom元素（以Vue组件方式或CustomMenu函数方式使用时必须传入）|-|-|-| |menuWidth|菜单宽度|Number|-|200| |menuList|生成菜单项的数组，具体配置参考下表|Array|-|-| |hasIcon|是否有菜单图标|Boolean|-|false| |iconType|菜单图标的类型，支持字体图标、SVG图标、VNode组件|'font-icon', 'svg-icon', 'vnode-icon'|-|font-icon| |menuWrapperCss|菜单容器的CSS设置，具体配置参考下表|Object|-|-| |menuItemCss|菜单项的CSS设置，具体配置参考下表|Object|-|-| |params|传给处理函数的自定义参数，会注入到下方各回调函数的首个参数中|Any|-|-| |appendToBody|容器是否挂载到body上|Boolean|-|true| |disabled|是否禁用整个菜单，接收一个函数|(params: any) => boolean|-|-| |useLongPressInMobile|移动端下兼容使用长按事件唤出菜单, 但长按模式不支持多级菜单（仅支持指令方式）|Boolean|-|false| |longPressDuration|长按事件需持续时间,单位ms|Number|-|500| |longPressPreventDefault|长按事件下touchstart是否PreventDefault, 可接收函数|Boolean/Function|-| |injectCloseListener|自动注入关闭菜单的Listener，设为false时需自行处理|Boolean|-|true| |customClass|注入自定义类名到MenuWrapper上|String|-|-| |onOpen|菜单打开后的回调（^2.0.8）|Function|-|-| |onClose|菜单打开后的回调（^2.0.8）|Function|-|-|

menuList-菜单项数组配置

|参数|说明|类型|可选值|默认值| |:---|:---|:---|:---|:---| |fn|点击菜单后执行的回调,回调参数1为用户传入的Params, 参数2为点击右键时所在的HtmlElement元素（使用document.elementFromPoint获取）, 参数3为指令绑定的当前元素, 参数4为原生点击事件数据|Function|-|-| |label|菜单名, 可使用函数，回调参数同fn选项|String, Function|-|-| |tips|菜单辅助文本（处于右侧的文本），可使用函数，回调参数同fn选项|String, Function|-|-| |icon|菜单图标的类名（字体图标)|String|-|-| |hidden|菜单项是否隐藏，可使用函数，回调参数同fn选项|Boolean, Function|-|-| |disabled|菜单项是否不可点击，可使用函数，回调参数同fn选项|Boolean, Function|-|-| |children|子菜单的菜单项数组（配置与此表一致，但目前仅支持二级菜单）|Array|-|-| |line|是否为分割线,该值为True时,以上设置均失效|Boolean|-|-| |customClass|注入自定义类名到MenuItem上|String|-|-|

menuWrapperCss-菜单容器CSS设置

|参数|说明|类型|可选值|默认值| |:---|:---|:---|:---|:---| |background|菜单容器背景色|String|-|#c8f2f0| |boxShadow|菜单容器阴影|String|-|0 1px 5px #888| |padding|默认padding|String|-|5px 0| |borderRadius|圆角|String|-|4px| |lineColor|分割线颜色|String|-|#ccc| |lineMargin|分割线Margin|String|-|5px 0|

menuItemCss-菜单项CSS设置

|参数|说明|类型|可选值|默认值| |:---|:---|:---|:---|:---| |height|每项高度|String|-|30px| |padding|-|String|-|0 10px| |iconSize|图标大小|String|-|20px| |iconFontSize|字体图标字体大小(设置类型为字体图标时可用)|String|-|null| |iconColor|字体图标颜色|String|-|#484852| |labelColor|菜单项标题颜色|String|-|#484852| |labelFontSize|菜单项标题字体大小|String|-|14px| |tipsColor|菜单辅助文字颜色|String|-|#889| |tipsFontSize|菜单辅助文字字体大小|String|-|12px| |arrowColor|指示箭头颜色（出现子菜单时生成）|String|-|#484852| |arrowSize|指示箭头大小（指示箭头为使用border生成的三角形)|String|-|10px| |disabledColor|菜单禁用状态时的颜色|String|-|#bcc| |hoverBackground|hover时菜单项的背景色|String|-|rgba(255,255,255,.8)| |hoverLabelColor|hover时菜单项label的颜色|String|-|null| |hoverTipsColor|hover时菜单项tips的颜色|String|-|null| |hoverArrowColor|hover时菜单项arrow的颜色|String|-|null|

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

Methods

|方法名|说明|参数| |:---|:---|:---| |show|显示菜单，一般不需要自行调用|x:number,y:number| |close|关闭菜单|-|

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

使用

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

<template>
  <div v-mouse-menu="options">Dom</div>
</template>
<script>
import { MouseMenuDirective } from '@howdyjs/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 '@howdyjs/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
    }
  }
}
</script>

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 '@howdyjs/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 '@howdyjs/mouse-menu';
export default {
  directive: {
    MouseMenu: {
      ...MouseMenuDirective,
      updated: MouseMenuDirective.mounted
    }
  }
}

• UMD Name: HowdyMouseMenu
• Example in ElementPlusTable: Demo