说明

支持菜单项从子菜单中选择一个为值

多选一

<script setup lang="ts">
import { h, ref } from 'vue'
import 'lt-contextmenu/dist/style.css'
import { LtContextmenu, MenuGenericOption } from 'lt-contextmenu'
import IconSortMode from "./icons/IconSortMode.vue"
import IconSortAsc from "./icons/IconSortAsc.vue"
import IconSortDesc from "./icons/IconSortDesc.vue"
import IconSortNone from "./icons/IconSortNone.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"
import { MenuValue } from 'lt-contextmenu'
import { MenuOption } from 'lt-contextmenu'

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

const selectRadioValue = ref('不排序')

const menuOptions = ref<MenuGenericOption>([
    {
        group: "group1",
        options: [
            {
                id: "1",
                icon: () => h(IconSortMode),
                label: "排序方式",
                type: 'radio',
                value: 'none',
                children: [
                    {
                        id: "1-2",
                        icon: () => h(IconSortAsc),
                        label: "升序",
                        value: 'asc',
                        handler: (menuParam?: any, value?: MenuValue, itemOption?: MenuOption) => {
                            selectRadioValue.value = '升序'
                        }
                    },
                    {
                        id: "1-3",
                        icon: () => h(IconSortDesc),
                        label: "降序",
                        value: 'desc',
                        handler: (menuParam?: any, value?: MenuValue, itemOption?: MenuOption) => {
                            selectRadioValue.value = '降序'
                        }
                    },
                    {
                        id: "1-4",
                        icon: () => h(IconSortNone),
                        label: "不排序",
                        value: 'none',
                        handler: (menuParam?: any, value?: MenuValue, itemOption?: MenuOption) => {
                            selectRadioValue.value = '不排序'
                        }
                    },
                ]
            },
            { id: "2", icon: () => h(IconDetail), label: "查看详情" },
            { id: "3", icon: () => h(IconAdd), label: "新增" },
            { id: "4", icon: () => h(IconModify), label: "修改" },
            { id: "5", icon: () => h(IconDelete), label: "删除" }
        ]
    }
])
</script>

<template>
    <div style="display: flex;;">
        <div class="container" @click.right="(event) => tlContextmenuRef?.open(event)">
            右键点击我
            <LtContextmenu ref="tlContextmenuRef" :menu-options="menuOptions" />
        </div>
        <div style="margin-left: 20px;font-size: 18px;">你选择了：{{ selectRadioValue }}</div>
    </div>
</template>

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

右键点击我

你选择了：不排序