ContextMenu 右键菜单

通过鼠标右键点击来触发一个定制化的菜单而不是默认的浏览器右键菜单。

TIP

contextmenu: 目前只做了部分功能，且不是完全符合规范，后续会继续优化。

基础用法

可使用options,type来设置菜单项和菜单样式。

primary

success

info

danger

warning

<template>
    <ym-context-menu type="primary" :options="options">
        <div class="content">primary</div>
    </ym-context-menu>
    <ym-context-menu type="success" :options="options">
        <div class="content">success</div>
    </ym-context-menu>
    <ym-context-menu type="info" :options="options">
        <div class="content">info</div>
    </ym-context-menu>
    <ym-context-menu type="danger" :options="options">
        <div class="content">danger</div>
    </ym-context-menu>
    <ym-context-menu type="warning" :options="options">
        <div class="content">warning</div>
    </ym-context-menu>
</template>

<script setup>

const options = [
    {
        label: "菜单1",
        handle: () => {
            console.log("菜单1")
        }
    },
    {
        label: "菜单2",
        handle: () => {
            console.log("菜单2")
        }   
    },
    {
        label: "菜单3",
        handle: () => {
            console.log("菜单3")
        }
    }
]

</script>

<style scoped>
.content {
    width: 400px;
    height: 100px;
    background-color: #ececec;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    margin: 5px 0;
}
</style>

自定义菜单内容

通过customize属性来开启菜单自定义模式，使用 menu 插槽来设置右键菜单的具体内容。

自定义菜单内容

<template>
    <ym-context-menu type="primary" customize >
        <div class="content">自定义菜单内容</div>
        <template #menu>
            <ym-button type="success" circle icon="search"></ym-button>
            <ym-button type="danger" circle icon="search"></ym-button> 
            <ym-button type="warning" circle icon="search"></ym-button>
        </template>
    </ym-context-menu>
</template>

<script setup>
</script>

<style scoped>
.content {
    width: 400px;
    height: 100px;
    background-color: #ececec;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    margin: 5px 0;
}
</style>

ContextMenu API

Props

Name	Description	Type	Default
type	类型	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	info
options	菜单选项（仅在customize为false时生效）	ContextMenuOptions	[]
customize	菜单是否自定义	boolean	false

Slots

Name	Description	Sub Component
default	默认插槽	-
menu	菜单插槽（仅在customize为true时生效）	-