Viog UI

上下文菜单 context-menu 待优化

右键呼出菜单

使用说明

简单引入

使用vi-context-menu组件，默认插槽为呼出目标内容，content插槽中定义上下文菜单

使用--vi-context-menu-z-index定义上下文菜单z-index

注意

请使用--vi-context-menu-width与--vi-context-menu-heightcss变量来定义上下文菜单的宽度与高度，请保证两值的单位为px

展开代码
<template>
    <vi-context-menu style="--vi-context-menu-width: 60px; --vi-context-menu-height: 150px; --vi-context-menu-z-index: 100;">
        <vi-button>右键呼出上下文菜单框</vi-button>
        <template v-slot:content>
            <div class="my-context-menu">这是一个上下文菜单</div>
        </template>
    </vi-context-menu>
</tempalte>

插槽

插槽名描述有无默认内容

可覆写css变量

变量名描述默认值