开始

安装

npm install lt-contextmenu
# 或者使用yarn
yarn add lt-contextmenu
# 或者使用pnpm
pnpm add lt-contextmenu

基础示例

<script setup lang="ts">
import { h, ref } from 'vue'
import 'ltm-contextmenu/dist/style.css'
import { LtContextmenu, MenuGenericOption } from 'ltm-contextmenu'
import IconRefresh from "@/components/icons/IconRefresh.vue"
import IconDetail from "@/components/icons/IconDetail.vue"
import IconAdd from "@/components/icons/IconAdd.vue"
import IconModify from "@/components/icons/IconModify.vue"
import IconDelete from "@/components/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: "2",
        options: [
            { id: "3", icon: () => h(IconAdd), label: "新增" },
            { id: "4", icon: () => h(IconModify), label: "修改" },
            { id: "5", icon: () => h(IconDelete), label: "删除" }
        ]
    }
])
</script>

<template>
    <div style="width: 200px;height: 200px;background-color: aquamarine;"
        @click.right="(event) => tlContextmenuRef?.open(event)">
        <LtContextmenu ref="tlContextmenuRef" :menu-options="menuOptions" />
    </div>
</template>

右键点击我