更新记录

1.0.5（2024-04-27）

更新了组件的默认数据，在传入任何参数的情况下，也会展示示例菜单

1.0.4（2024-04-26）

更新了依赖项的说明

1.0.3（2024-04-26）

更新了部分问题，更新了说明文档

平台兼容性

bch-tree-meun

一个H5端（不仅限于）适配的，支持JSON树形结构数据递归渲染的，可收缩或展开的导航菜单插件。
    默认CSS样式支持三级导航，每级导航项目的图标、标题文字均可实现自定义

查看示例demo

属性列表及说明

    controlButtonIocn       控制左侧面板展开/收缩的按钮图标类名数组
        默认值：['iconfont icon-shouqi', 'iconfont icon-zhankai']，第1个是收缩状态下的图标，第2个是展开状态下的图标
    menuData                菜单项的JSON数据
        数据样例：
            [{

                id: 31,                                 //id:作为key的值，不能重复
                show: false,                            //控制子项目是否展示
                title: '人员信息',                      //导航菜单的标题文字
                menuClass: 'm-father',                  //父级导航菜单项的样式类名
                levelClass:'levelStyle-1',              //控制1级导航菜单的样式
                leftIcon: 'iconfont icon-peizhi1',      //导航菜单左侧的图标
                rightIconState: true,                   //父导航菜单右侧的状态图标控制controlItemRightIcon[0]/controlItemRightIcon[1] 
                children: [{                            //子菜单
                    id:32,
                    show: false,
                    title: '菜单3.1',
                    menuClass: 'm-end-leaf',
                    levelClass:'levelStyle-2',
                    leftIcon: 'iconfont icon-WEBSITE',
                    rightIconState: true,
                    children: []
                }]
            }]

    spreadStyle             菜单面板展开时的样式，默认：{'width': '200px','transition': '0.4s'}
    NoSpreadStyle           菜单页面收缩时的样式，默认： {'width': '65px','transition': '0.4s'}
    controlItemRightIcon    父菜单右边的图标，数组，包含子项展开时图标和折叠时图标
    onClick                 菜单项点击时的回调函数，返回当前菜单项的数据

示例代码

<!--    H5端（但不仅限于H5端）可以使用的，支持树状数据结构的菜单，定位于容器的左侧，可以展开和收缩两种状态间切换。
    props:
        controlButtonIocn       控制左侧面板展开/收缩的按钮图标类名数组
        menuData                菜单项的JSON数据
        spreadStyle             菜单面板展开时的样式，默认：{'width': '200px','transition': '0.4s'}
        NoSpreadStyle           菜单页面收缩时的样式，默认： {'width': '65px','transition': '0.4s'}
        controlItemRightIcon    父菜单右边的图标，数组，包含子项展开时图标和折叠时图标
        onClick                 菜单项点击时的回调函数，返回当前菜单项的数据
        itemData                回调函数返回的当前被点击的节点参数 -->

<template>
    <view class="container">
        <!-- APP端不展示顶部导航 -->
        <!-- #ifdef H5 -->
        <h5-navigation></h5-navigation>
        <!-- #endif -->
        <view class="content">
            <!-- 不传入任何参数的使用示例 -->
            <!-- <bch-tree-menu></bch-tree-menu> -->

            <!-- 下面是传入参数的使用示例 -->
            <bch-tree-menu 
                :menuData="menuData"
                :controlItemRightIcon="['iconfont icon-xiangyou','iconfont icon-youxia']"
                :controlButtonIocn="controlButtonIocn" 
                :onClick="callback">
            </bch-tree-menu>
            <scroll-view class="h5-content" scroll-y="true" scroll-x="true" show-scrollbar="true">
                当前节点的数据：{{itemData}}
            </scroll-view>

        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                controlButtonIocn: ['iconfont icon-jiantou_xiangzuoliangci', 'iconfont icon-jiantou_xiangyouliangci'],
                itemData: null,
                menuData: [{
                        id: 1,
                        show: false,
                        title: '基础数据',
                        menuClass: 'm-father ',
                        levelClass: 'levelStyle-1',
                        leftIcon: 'iconfont icon-leibie',
                        rightIconState: true,
                        children: [{
                                id: 2,
                                show: false,
                                title: '菜单1.1',
                                menuClass: 'm-start-leaf',
                                levelClass: 'levelStyle-2',
                                leftIcon: 'iconfont icon-gongsi',
                                rightIconState: true,
                                children: []
                            },
                            {
                                id: 3,
                                show: false,
                                title: '物资管理',
                                menuClass: 'm-father', //中间叶子
                                levelClass: 'levelStyle-2',
                                leftIcon: 'iconfont icon-wuziguanli',
                                rightIconState: true,
                                children: [{
                                        id: 20,
                                        show: false,
                                        title: '菜单1.20',
                                        menuClass: 'm-start-leaf',
                                        levelClass: 'levelStyle-3',
                                        leftIcon: 'iconfont icon-leibie',
                                        rightIconState: true,
                                        children: []
                                    }

                                ]
                            },
                            {
                                id: 7,
                                show: false,
                                title: '菜单1.3',
                                menuClass: 'm-mid-leaf', //中间叶子
                                levelClass: 'levelStyle-2',
                                leftIcon: 'iconfont icon-setting-role',
                                rightIconState: true,
                                children: []
                            },
                            {
                                id: 4,
                                show: false,
                                title: '菜单1.4',
                                menuClass: 'm-end-leaf', //最后的叶子菜单
                                levelClass: 'levelStyle-2',
                                leftIcon: 'iconfont icon-liebiao',
                                rightIconState: true,
                                children: []
                            }
                        ]
                    },
                    {
                        id: 5,
                        show: false,
                        title: '系统管理',
                        menuClass: 'm-father',
                        levelClass: 'levelStyle-1',
                        leftIcon: 'iconfont icon-peizhi1 custom-left-icon-class',
                        rightIconState: true,
                        children: [{
                            id: 6,
                            show: false,
                            title: '菜单2.1',
                            menuClass: 'm-end-leaf',
                            levelClass: 'levelStyle-2',
                            leftIcon: 'iconfont icon-WEBSITE',
                            rightIconState: true,
                            children: []
                        }]
                    },
                    {
                        id: 31,
                        show: false,
                        title: '人员信息',
                        menuClass: 'm-father',
                        levelClass: 'levelStyle-1',
                        leftIcon: 'iconfont icon-peizhi1 custom-left-icon-class',
                        rightIconState: true,
                        children: [{
                            id: 32,
                            show: false,
                            title: '菜单3.1',
                            menuClass: 'm-end-leaf',
                            levelClass: 'levelStyle-2',
                            leftIcon: 'iconfont icon-WEBSITE',
                            rightIconState: true,
                            children: []
                        }]
                    }
                ]
            }
        },
        methods: {
            callback(e) {
                console.log('根据业务逻辑进行处理', e);
                this.itemData = JSON.stringify(e)
            }
        }
    }
</script>

<style lang="scss">
    .container {
        //############   关键样式 ##############
        height: 100vh;
        //############   关键样式 ##############
        // 背景可个性化
        background-color: #f0f0f0;
        width: 100%;
    }

    .content {
        // H5端需要展示顶部导航,所以要腾出空间
        /* #ifdef H5 */
        height: calc(100% - 65px);
        /* #endif */
        width: 100%;
        //############   关键样式 ##############
        display: flex;
        //############   关键样式 ##############
    }

    .h5-content {
        overflow: auto;
        /* #ifndef APP */
        width: 100%;
        /* #endif */
        /* #ifdef MP-WEIXIN */
        height: 100vh;

        /* #endif */
        font-size: 20px;
        /* #ifdef APP */
        height: 100vh;
        /* #endif */

        padding: 20px;
    }
</style>

依赖项

1、uni_modules\components\static目录下面的文件说明
    样式文件：bch-tree-menu.scss
    图标字体文件：iconfont.css,iconfont.ttf,iconfont.woff,iconfont.woff2
2、本插件依赖 uni-transition 过渡动画插件，请自行下载

uni-transition下载地址

自定义样式的说明

1、直接修改样式文件，实现自定义样式。
2、直接覆盖图标文件，在使用插件时，传入图标类名，实现自定义图标。
3、如果您想废弃插件本身的样式，需要执行以下步骤
    【1】移除uni_modules\components\bch-tree-menu.vue文件中的样式引用：

        <style lang="scss">
            // @import '../../static/bch-tree-menu.scss';   //注释此行，废除插件本身的样式
            // @import '../../static/iconfont.css';         //注释此行，废除插件本身的样式
        </style>
    【2】移除uni_modules\components\recursive-menu.vue文件中的样式引用：

        <style lang="scss">
            // @import '../../static/bch-tree-menu.scss';   //注释此行，废除插件本身的样式
            // @import '../../static/iconfont.css';         //注释此行，废除插件本身的样式
        </style>
    【3】复制uni_modules\components\static目录下的bch-tree-menu.scss文件中的所有内容，粘贴到您的项目uni.scss文件中根据情况进行自定义。
    【4】根据第三方图标库的使用教程，通过传入图标类名，实现自定义图标。

    注意：
        （1）导航菜单项左侧的图标类名通过menuData中的leftIcon属性传入
        （2）导航菜单项右侧的图标类名通过插件的controlItemRightIcon属性传入。
        （3）折叠面板的控制按钮图标类名通过插件的controlButtonIocn属性传入。