说明

LtContextmenu的props参数定义如下：

type MenuProps = {
    menuOptions: MenuGenericOption
    menuStyle?: MenuStyle
    menuTheme?: MenuTheme
    menuSize?: MenuSize
    width?: string | number
    maxWidth?: string | number
    groupClass?: string | ((menuParam?: any) => string)
    groupStyle?: CSSProperties | ((menuParam?: any) => CSSProperties)
    itemClass?: string | ((menuParam?: any, itemOption?: MenuOption) => string)
    itemStyle?: CSSProperties | ((menuParam?: any, itemOption?: MenuOption) => CSSProperties)
    beforeClose?: (close: () => void) => void
}

参数	说明	必填	默认
menuOptions	菜单配置，支持菜单项或菜单组项的数组	✅	无
menuStyle	菜单类型，'google' | 'edge'	⬜	'google'
menuTheme	菜单主题，'light' | 'dark-element' | 'dark-naive'	⬜	'light'
menuSize	菜单尺寸，'small' | 'normal' | 'large'	⬜	'small'
width	菜单宽度，如果没有则自适应	⬜	无
maxWidth	菜单最大宽度	⬜	无
groupClass	菜单组项的class	⬜	无
groupStyle	菜单组项的style	⬜	无
itemClass	菜单项的class	⬜	无
itemClass	菜单项的style	⬜	无
itemClass	关闭前的回调，可终止菜单的关闭	⬜	无

基础菜单

右键点击我

<script setup lang="ts">
import { h, ref } from 'vue'
import 'lt-contextmenu/dist/style.css'
import { LtContextmenu, MenuGenericOption } from 'lt-contextmenu'
import IconRefresh from "./icons/IconRefresh.vue"
import IconDetail from "./icons/IconDetail.vue"
import IconAdd from "./icons/IconAdd.vue"
import IconModify from "./icons/IconModify.vue"
import IconDelete from "./icons/IconDelete.vue"

const tlContextmenuRef = ref<InstanceType<typeof LtContextmenu>>()

const menuOptions = ref<MenuGenericOption>([
    {
        group: "group1",
        options: [
            { id: "1", icon: () => h(IconRefresh), label: "刷新页面" },
            { id: "2", icon: () => h(IconDetail), label: "查看详情" }
        ]
    },
    {
        group: "group2",
        options: [
            { id: "3", icon: () => h(IconAdd), label: "新增" },
            { id: "4", icon: () => h(IconModify), label: "修改" },
            { id: "5", icon: () => h(IconDelete), label: "删除" }
        ]
    }
])
</script>

<template>
    <div class="container" @click.right="(event) => tlContextmenuRef?.open(event)">
        右键点击我
        <LtContextmenu ref="tlContextmenuRef" :menu-options="menuOptions" />
    </div>
</template>

<style scoped>
.container {
    width: 200px;
    height: 200px;
    background-color: #00C9A7;
    color: white;
}
</style>

分组菜单

右键点击我

<script setup lang="ts">
import { h, ref } from 'vue'
import 'lt-contextmenu/dist/style.css'
import { LtContextmenu, MenuGenericOption } from 'lt-contextmenu'
import IconRefresh from "./icons/IconRefresh.vue"
import IconDetail from "./icons/IconDetail.vue"
import IconAdd from "./icons/IconAdd.vue"
import IconModify from "./icons/IconModify.vue"
import IconDelete from "./icons/IconDelete.vue"

const tlContextmenuRef = ref<InstanceType<typeof LtContextmenu>>()

const menuOptions = ref<MenuGenericOption>([
    {
        group: "group1",
        options: [
            { id: "1", icon: () => h(IconRefresh), label: "刷新页面" },
            { id: "2", icon: () => h(IconDetail), label: "查看详情" }
        ]
    },
    {
        group: "group2",
        options: [
            { id: "3", icon: () => h(IconAdd), label: "新增" },
            { id: "4", icon: () => h(IconModify), label: "修改" },
            { id: "5", icon: () => h(IconDelete), label: "删除" }
        ]
    }
])
</script>

<template>
    <div class="container" @click.right="(event) => tlContextmenuRef?.open(event)">
        右键点击我
        <LtContextmenu ref="tlContextmenuRef" :menu-options="menuOptions" />
    </div>
</template>

<style scoped>
.container {
    width: 200px;
    height: 200px;
    background-color: #00C9A7;
    color: white;
}
</style>

子菜单

右键点击我

<script setup lang="ts">
import { h, ref } from 'vue'
import 'lt-contextmenu/dist/style.css'
import { LtContextmenu, MenuGenericOption } from 'lt-contextmenu'
import IconRefresh from "./icons/IconRefresh.vue"
import IconDetail from "./icons/IconDetail.vue"
import IconMore from "./icons/IconMore.vue"
import IconAdd from "./icons/IconAdd.vue"
import IconModify from "./icons/IconModify.vue"
import IconDelete from "./icons/IconDelete.vue"

const tlContextmenuRef = ref<InstanceType<typeof LtContextmenu>>()

const menuOptions = ref<MenuGenericOption>([
    {
        group: "group1",
        options: [
            { id: "1", icon: () => h(IconRefresh), label: "刷新页面" },
            { id: "2", icon: () => h(IconDetail), label: "查看详情" }
        ]
    },
    {
        group: "group2",
        options: [
            {
                id: '3',
                icon: () => h(IconMore),
                label: "操作",
                children: [
                    { id: "3-1", icon: () => h(IconAdd), label: "新增" },
                    { id: "3-2", icon: () => h(IconModify), label: "修改" },
                    { id: "3-3", icon: () => h(IconDelete), label: "删除" }
                ]
            }
        ]
    }
])
</script>

<template>
    <div class="container" @click.right="(event) => tlContextmenuRef?.open(event)">
        右键点击我
        <LtContextmenu ref="tlContextmenuRef" :menu-options="menuOptions" />
    </div>
</template>

<style scoped>
.container {
    width: 200px;
    height: 200px;
    background-color: #00C9A7;
    color: white;
}
</style>