min-menu

一、场景和形态

一般用户构建鼠标点击处展示菜单，配合showSlot接口使用，特点是至简，没有花里胡哨的功能。

现场演示

下面这个菜单，是由axue-min-menu组件渲染

演示代码如下：

<!--在vitepress中的.md文件中直接引入下面的代码-->
<div id="container"></div>
<script setup>
  import('axue').then(({showTip}) => {
    const componentName ='axue-min-menu'
    const el = document.createElement(componentName);
    el.args = [
       {
            label:"删除",
            onClick:function (){
                showTip.success("已删除")
            }
        },
        {
            label:"保存",
            onClick:function (){}
        }
    ];
    document.getElementById('container')?.appendChild(el);
  });
</script>

二、使用方式

定义参数

let  args = [
       {
            label:"主页",
            onClick:function (){
                //...
            }
        }
    ]

使用组件

<axue-min-menu .args=${args} ></axue-min-menu>

属性API

注意，传参是一个数组，成员是标准menu结构体

内联属性	说明	类型	默认值
menu数组	选项对象数组，内部结构如下下面	array[menu]	""
label	菜单标题文本，长度不建议超过6个字，自己把握	string	""
onClick	选项单击事件回调	function	null