ApeeMenu

无限层级下拉菜单

功能介绍

• JSON 配置
• 可设置自动勾选/取消勾选
• 可设置当前菜单限制单选
• 可设置自动收起菜单

类型定义

/** 菜单类型 */
export type Menu = Item[]
/** 菜单项 */
export type Item = {
    /** 菜单文本 */
    text: string,
    /** 子菜单列表 */
    subMenu?: Menu,
    /** 是否勾选 */
    isChecked?: boolean,
    /** 是否禁用 */
    disabled?: boolean,
    /** 点击自动关闭菜单，只对无子菜单的菜单项有效，默认 `true` */
    autoClose?: boolean,
    /** 自动勾选/取消勾选，只对无子菜单的菜单项有效，默认 `false` */
    autoCheck?: boolean,
    /** 是否限定单选，只对无子菜单的菜单项有效，默认 `false` */
    oneCheck?: boolean,
    /** 单击事件 */
    onclick?: ((
        /** 当前菜单项配置 */
        itemConfig: Item,
        /** 鼠标事件对象 */
        event: MouseEvent
    ) => void) | (() => void)
}

使用方法

安装 ApeeMenu

1. 通过 npm 安装

   npm install apee-menu

2. 通过 script 标签引入

   <!-- 未压缩版本 -->
   <script src="https://cdn.jsdelivr.net/npm/apee-menu/dist/apee-menu.js"></script>
   <!-- 压缩版本 -->
   <script src="https://cdn.jsdelivr.net/npm/apee-menu/dist/apee-menu.min.js"></script>

3. 导入 ApeeMenu

   import { ApeeMenu } from 'apee-menu'
   const { ApeeMenu } = require('apee-menu')

4. 使用 ApeeMenu

   const apeeMenu = new ApeeMenu()
   const menuConfig = [
       {
           text: '文件',
           subMenu: [
               { text: '新建文本文件' },
               { text: '新建文件' },
               { text: '新建窗口' },
               {
                   text: '打开文件',
                   subMenu: [
                       { text: '新建文本文件' },
                       { text: '新建文件' },
                       { text: '新建窗口' },
                       { text: '打开文件' },
                   ]
               },
           ]
       }
   ]
   apeeMenu.setMenuConfig(menuConfig)
   apeeMenu.setLocation(100, 50)
   document.querySelector('button').onclick = function () {
   apeeMenu.show()
   }

导入 CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apee-menu/css/style.css">

创建 HTML 按钮

请为需要设置点击展开菜单事件的元素增加 apee-menu 类。

<button class="apee-menu"></button>

环境搭建

• 安装依赖：npm install
• 打包编译：npm run build

项目信息

• 作者：欧阳鹏
• 日期：2023 年 6 月 1 日