更新记录

1.0.7（2024-05-06） 下载此版本

暴露一个自定义跳转方法，用于路由跳转时处理权限等

1.0.6（2024-04-30） 下载此版本

菜单样式调整

1.0.5（2024-04-28） 下载此版本

增加控制分类标题是否显示参数

平台兼容性

tf-menu

1. 组件作用
   • uniapp小程序菜单组件
   • 注：菜单ui图片大小宽高尽量保持为width: 88rpx;height: 88rpx;
2. 组件引用例子

<template>
    <view class="main">
        <TfMenu
         :data="menuData"
         @navigateTo="navigateTo"
        >
        </TfMenu>
    </view>
</template>

<script>
    import TfMenu from '../../uni_modules/tf-menu/components/tf-menu/tf-menu.vue'
    export default {
        components:{
            TfMenu
        },
        data() {
            return {
                menuData:[{
                    title: '分类1',
                    menu: [{
                        icon: "https://cdn.uviewui.com/uview/album/1.jpg",
                        label: '菜单1',
                        path: '../views/payment-refund/payment-refund'
                    },
                    {
                        icon: "https://cdn.uviewui.com/uview/album/1.jpg",
                        label: '菜单2',
                        path: '../views/arrears-note/arrears-note'
                    }
                    ]
                },
                {
                    title: '分类2',
                    menu: [{
                        icon: "https://cdn.uviewui.com/uview/album/1.jpg",
                        label: '菜单1',
                        path: '../views/payment-refund/payment-refund'
                    },
                    {
                        icon: "https://cdn.uviewui.com/uview/album/1.jpg",
                        label: '菜单2',
                        path: '../views/arrears-note/arrears-note'
                    }
                    ]
                },
                {
                    title: '分类3',
                    menu: [{
                        icon: "https://cdn.uviewui.com/uview/album/1.jpg",
                        label: '菜单1',
                        path: '../views/payment-refund/payment-refund'
                    },
                    {
                        icon: "https://cdn.uviewui.com/uview/album/1.jpg",
                        label: '菜单2',
                        path: '../views/arrears-note/arrears-note'
                    }
                    ]
                }
                ]
            }
        },
        onLoad() {

        },
        methods: {
            navigateTo(value){
                console.log(value)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .main{
        min-height: 100vh;
        background: linear-gradient(180deg, #DEEBFF 0%, #F5F7FA 23.95%);
    }
</style>

3. 组件属性说明

4. 组件方法说明