Nibbling Perfect Macaroni

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

    1.1.10 • Public • Published

    zl-ver-menu

    递归实现的一个垂直菜单

    演示地址

    https://zl-fire.github.io/code/zl-ver-menu.html

    使用前提

    在使用前需要引入 jQuery,如

    <script src="https://cdn.jsdelivr.net/npm/blogzl-indexjs@18.0.0/dist/jquery.min.js"></script>

    使用方法

    方式一:使用 script 标签引入进行使用

    <!DOCTYPE html>
    <html lang="zh-cn">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>zl-ver-menu使用演示</title>
        <script src="https://cdn.jsdelivr.net/npm/blogzl-indexjs@18.0.0/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/zl-ver-menu@1.0.7/index.js"></script>
    </head>
    
    <body>
        <div class="your-menu"></div>
        <script>
            zl_ver_menu = window["zl-ver-menu"]; //从window上获取zl-ver-menu方法
            //准备cata数据
            let dataList = [
                {
                    "id": 6,
                    "parent_id": 0,
                    "name": "李冰有限公司A",
                    "children": [
                        {
                            "id": 7,
                            "parent_id": 6,
                            "name": "财务部",
                            "children": []
                        },
                        {
                            "id": 108,
                            "parent_id": 6,
                            "name": "第二个部门",
                            "children": []
                        }
                    ]
                }
            ];
            //调用此方法生成垂直菜单(class名和上面html元素的class名一致即可,可以任取)
            zl_ver_menu({
                data:dataList, //菜单数据
                menuClassName: "your-menu", //菜单容器元素的class名
                callback: function (par) { console.log(par) }, //点击具体的菜单项后要执行的函数(par默认会传入点击的节点)
                show: true, //此垂直菜单默认为全部展开
                width: "230px" //此垂直菜单默认宽度为230px
            });
        </script>
    </body>
    
    </html>

    方式二:使用 import 标签引入进行使用

         import zl_ver_menu from "zl-ver-menu";
           //准备cata数据
           let dataList = [
                {
                    "id": 6,
                    "parent_id": 0,
                    "name": "李冰有限公司A",
                    "children": [
                        {
                            "id": 7,
                            "parent_id": 6,
                            "name": "财务部",
                            "children": []
                        },
                        {
                            "id": 108,
                            "parent_id": 6,
                            "name": "第二个部门",
                            "children": []
                        }
                    ]
                }
            ];
            //调用此方法生成垂直菜单(class名和上面html元素的class名一致即可,可以任取)
            zl_ver_menu({
                data:dataList, //菜单数据
                menuClassName: "your-menu", //菜单容器元素的class名
                callback: function (par) { console.log(par) }, //点击具体的菜单项后要执行的函数(par默认会传入点击的节点)
                show: true,//此垂直菜单默认为全部展开
                width: "230px" //此垂直菜单默认宽度为230px
    
            });

    参数详细说明

    /**
      * @description 作用与目的:调用creatVerMenu函数得到真正的菜单DOM
      * @param {object} parObj: 参数对象
      * @param {object[]} parObj.data  构建菜单的对象数组数据
      * @param {string} parObj.menuClassName  构建菜单的元素class
      * @param {string} parObj.width  菜单容器的宽度,默认230px(传参时传入字符串形式,如 400px)
      * @param {function} parObj.callback  点击具体的菜单项后要执行的函数(par默认会传入点击的节点)
      * @param {boolean} parObj.show {boolean} 默认全部展开还是全部收缩,默认为true.全部展开
      * @param {boolean} parObj.defaultSelect {boolean} 默认全部展开全部时(show=true),是否默认选中第一个菜单,默认为true,即选择第一个菜单
      * @return {object|viod} 当在node端调用时,将返回一个对象{ styleStr, templateStr, jsStr },表示菜单的html+css+js . 在浏览器调用时将会把菜单直接写入到页面上
      * */

    Keywords

    none

    Install

    npm i zl-ver-menu

    DownloadsWeekly Downloads

    1

    Version

    1.1.10

    License

    ISC

    Unpacked Size

    39.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • zhangluzhanglu