说明

支持菜单项的开关功能

选择开启/关闭

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

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

const toggleValue = ref(false)

const menuOptions = ref<MenuGenericOption>([
    {
        group: "group1",
        options: [
            {
                id: "1",
                icon: () => h(IconFocus),
                label: "关注",
                type: 'toggle',
                value: toggleValue.value,
                change: (menuParam?: any, value?: MenuValue, itemOption?: MenuOption) => {
                    toggleValue.value = 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;">你<span style="margin: 0 4px;font-weight: bold;">{{ toggleValue ?
                '开启' : '取消' }}</span>了关注</div>
    </div>
</template>

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

右键点击我

你取消了关注