更新记录

1.0.2（2023-09-19）

改为uni_modules规范

1.0.1（2023-06-20）

修改图片引入方法，兼容小程序

1.0.0（2023-04-04）

初始版本

平台兼容性

dropdownMenu 下拉菜单

使用方法：

<dropdownMenu :modelList.sync="modelList" :disList="disList" :cityList="cityList" :searchList="searchList" :labelList.sync="labelList" @searchFinish="searchFinish"/>

import dropdownMenu from '@/uni_modules/piaoyi-dropdownMenu/components/piaoyi-dropdownMenu/piaoyi-dropdownMenu.vue'
export default {
    components: {
        dropdownMenu
    },
    data() {
        return {
            modelList: [{
                title: '类型1',
                children: [{
                    name: '类型1-1',
                    value: '类型1-1'
                }, {
                    name: '类型1-2',
                    value: '类型1-2'
                }, {
                    name: '类型1-3',
                    value: '类型1-3'
                }, {
                    name: '类型1-4',
                    value: '类型1-4'
                }]
            }, {
                title: '类型2',
                children: [{
                    name: '类型2-1',
                    value: '类型2-1'
                }, {
                    name: '类型2-2',
                    value: '类型2-2'
                }, {
                    name: '类型2-3',
                    value: '类型2-3'
                }, {
                    name: '类型2-4',
                    value: '类型2-4'
                }]
            }],
            disList: [{
                name: '附近',
                id: 1
            }, {
                name: '3公里',
                id: 3
            }, {
                name: '5公里',
                id: 5
            }, {
                name: '10公里',
                id: 10
            }, {
                name: '15公里',
                id: 15
            }, {
                name: '20公里',
                id: 20
            }],
            cityList: [{
                    id: "420102",
                    name: "江岸区"
                },
                {
                    id: "420103",
                    name: "江汉区"
                }
            ],
            searchList: [{
                name: '智能排序',
                value: 0
            }, {
                name: '距离优先',
                value: 1
            }],
            labelList: [{
                id: '标签1',
                name: '标签1'
            }, {
                id: '标签2',
                name: '标签2'
            }, {
                id: '标签3',
                name: '标签3'
            }, {
                id: '标签3',
                name: '标签3'
            }, {
                id: '标签4',
                name: '标签4'
            }],
        }
    },
    methods: {
        <!-- 筛选结果回调 -->
        searchFinish(result) {
            console.log(result)
        }
    }
}

事件说明

Prop

可接定制化组件开发

右侧有本人代表作小程序二维码，可以扫码体验

如使用过程中有问题或有一些好的建议，欢迎加QQ群互相学习交流：120594820