apee-menu
TypeScript icon, indicating that this package has built-in type declarations

1.0.8 • Public • Published

ApeeMenu

无限层级下拉菜单

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 日

Readme

Keywords

none

Package Sidebar

Install

npm i apee-menu

Weekly Downloads

1

Version

1.0.8

License

ISC

Unpacked Size

45.6 kB

Total Files

16

Last publish

Collaborators

  • oyps