/lt-contextmenu

一个基于Vue3的右键菜单组件

Primary LanguageVueMIT LicenseMIT

image

lt-contextmenu

一款vue3开发的右键菜单组件

Nuget License: MIT

🚀 安装

NPM 安装（推荐）

$ npm i -S lt-contextmenu # yarn add lt-contextmenu # pnpm add lt-contextmenu

🎃 使用

<script setup lang="ts">
import 'lt-contextmenu/dist/style.css'
import { LtContextmenu, type MenuGroupOption, type MenuOption, type MenuValue } from 'lt-contextmenu'

const ltContextmenu = ref()

//传递的菜单参数
const data = {
  name: 'lijiatu'
}

//菜单配置项, 更多见下面的配置项说明
const menuOptions = ref<MenuGroupOption[]>([
    {
        group: 'default',
        options: [
            {
                id: '1',
                icon: () => h(FileExport),
                label: '菜单1',
            },
            {
                id: '2',
                icon: () => h(FileExport),
                label: '菜单2',
            },
        ]
    }
])

</script>

<template>
  <div style="width: 100%;height: 100%;" @click.right="(e) => ltContextmenu?.open(e, data)">
    <LtContextmenu ref="ltContextmenu" :menu-options="menuOptions" />
  </div>
</template>

配置项

参数 说明 类型 必填 默认值
menuOptions 核心配置项 Array<MenuOption|MenuGroupOption> ✅ 无
menuStyle 菜单风格 'google' | 'edge' ⬜ 'google'
menuTheme 菜单主题 'light' | 'dark-element' | 'dark-naive' ⬜ 'light'
menuSize 菜单大小 'normal' | 'small' | 'large' ⬜ 'small'
width 菜单固定宽度, 不设置则动态宽度 number|string ⬜ 无
maxWidth 菜单最大宽度 number|string ⬜ 无
groupClass 菜单组的class string ⬜ 无
groupStyle 菜单组的style CSSProperties ⬜ 无
itemClass 菜单项的class string ⬜ 无
itemStyle 菜单项的style CSSProperties ⬜ 无
beforeClose 关闭前的回调，可终止菜单的关闭 (close: () => void) => void ⬜ 无

类型说明

type MenuOption = {
    //必填项, 唯一id
    id: string | number
    //可选, 菜单图标
    icon?: (menuParam?: any, itemOption?: MenuOption) => VNode
    //必填, 菜单文本
    label: string | ((menuParam?: any, itemOption?: MenuOption) => VNode | string)
    //可选, 菜单是否可见, 为false时该菜单不会渲染（v-if）
    visible?: boolean | ((menuParam?: any, itemOption?: MenuOption) => boolean)
    //可选, 菜单是否禁用, 为true时该菜单不可点击
    disabled?: boolean | ((menuParam?: any, itemOption?: MenuOption) => boolean)
    //菜单项的类型, 默认menu, MenuItemType='menu'|'radio'
    type?: MenuItemType
    //菜单类型为'radio'、'toggle'时选中的值, MenuValue=string|number|boolean|Array<string|number|boolean>
    value?: MenuValue | ((menuParam?: any) => MenuValue)
    //菜单项点击事件
    handler?: (menuParam?: any, value?: MenuValue, itemOption?: MenuOption) => void
    //子菜单, MenuChildrenOption=MenuGenericOption | ((menuParam?: any, value?: MenuValue, itemOption?: MenuOption) => MenuGenericOption)
    children?: MenuChildrenOption
    //其类型为'radio'、'toggle'时改变值会执行
    change?: (menuParam?: any, value?: MenuValue, itemOption?: MenuOption) => void
}

type MenuGroupOption = {
    //菜单组名称
    group: string
    //菜单项
    options: MenuOption[]
}

函数参数说明

参数 说明
menuParam 菜单项传递的参数
value 菜单类型为radio时选中的值
itemOption 菜单项本身

Exposes

{
    //打开菜单
    open: (event: MouseEvent | { x: number, y: number }, param?: any) => void,
    //关闭菜单
    close: () => void,
    //根据菜单id获取菜单选项
    getMenuOption: (id: string | number) => MenuOption,
    //当菜单类型为radio时手动设置其value
    setRadioValue: (id: string | number, value?: MenuValue) => void,
    //当菜单类型为radio时根据菜单id获取其value
    getRadioValue: (id: string | number) => MenuValue
}

🎆 预览

image image