更新记录

1.1.1（2025-03-06） 下载此版本

1.1.1

1.1.0（2025-03-06） 下载此版本

1.1.0

1.0.0（2025-03-05） 下载此版本

1.0.0

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- √ √ √ √ - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ - - - - - - √ - - - -

其他

多语言 暗黑模式 宽屏模式 蒸汽模式
× × √ ×

op-drop-down

前端UI下拉选择组件，

使用方式

<Op-Drop-Down :defaultValue="form" :option="paramOptions" :closeOnClickModal="true" @change="onChange" @reset="reset">
    <template #customKey>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
    </template>
</Op-Drop-Down>
import OpDropDown from '@/uni_modules/op-drop-down/components/op-drop-down/op-drop-down.vue';

export default {
    components: { OpDropDown },
    data() {
        return {
            form: {
                type: [],
                status: '',
                time: '',
                dateTimeRange: [],
                                customKey: ''
            },
            paramOptions: [
                {
                    title: '分类',
                    key: 'type',
                    type: 'cascader',
                    props: { label: 'label', value: 'value', children: 'children', disabled: 'disabled'},
                    option: [
                        { 
                            label: '标题1', 
                            value: '1',
                            children: [
                                {
                                    label: '标题1-1',
                                    value: '1-1',
                                    children: [
                                        { label: '标题1-1-1', value: '1-1-1' },
                                        { label: '标题1-1-2', value: '1-1-2' },
                                        { label: '标题1-1-3', value: '1-1-3', disabled: true },
                                        { label: '标题1-1-4', value: '1-1-4', disabled: true },
                                        { label: '标题1-1-5', value: '1-1-5' },
                                        { label: '标题1-1-6', value: '1-1-6' }
                                    ]
                                },
                                {
                                    label: '标题1-2',
                                    value: '1-2',
                                    children: [
                                        { label: '标题1-2-1', value: '1-2-1' },
                                        { label: '标题1-2-2', value: '1-2-2' }
                                    ]
                                }
                            ]
                        },
                        {
                            label: '标题2', 
                            value: '2',
                            children: [
                                {
                                    label: '标题2-1',
                                    value: '2-1',
                                    children: [
                                        { label: '标题2-1-1', value: '2-1-1' },
                                        { label: '标题2-1-2', value: '2-1-2' }
                                    ]
                                },
                                {
                                    label: '标题2-2',
                                    value: '2-2',
                                    children: [
                                        { label: '标题2-2-1', value: '2-2-1' },
                                        { label: '标题2-2-2', value: '2-2-2' }
                                    ]
                                }
                            ]
                        },
                        {
                            label: '标题3', 
                            value: '3',
                        },
                        {
                            label: '标题4', 
                            value: '4',
                        },
                        {
                            label: '标题5', 
                            value: '5',
                        }
                    ]
                },
                {
                    title: '状态',
                    key: 'status',
                    type: 'select',
                    option: [
                        { label: '在线', value: 'online'},
                        { label: '离线', value: 'offline'},
                    ]
                },
                {
                    title: '时间',
                    key: 'time',
                    type: 'time',
                    placeholder: '请选择',
                },
                {
                    title: '日期范围',
                    key: 'dateTimeRange',
                    type: 'datetimerange',
                    startPlaceholder: '请选择',
                    endPlaceholder: '请选择',
                },
                                {
                                    title: '自定义',
                                    key: 'customKey',
                                    type: 'custom',
                                }
            ]
        }
    },
    onLoad() {

    },
    methods: {
        onChange(val) {
            this.form = val
            console.log(val)
        },
        reset(val) {
            this.form = val
            console.log(val)
        }
    }
}

组件的属性说明如下：

属性 类型 默认值 必填 说明
defaultValue Object {} 是 设置整个下拉的默认键值对
option Array [] 是 下拉菜单配置的数据
closeOnClickModal Boolean true 否 点击模态窗是否关闭下拉

option参数说明：

属性 类型 默认值 必填 说明
title String 是 属性名，显示在页面上
key String 是 与defaultValue对应的键
type String 可选cascader、select、date、time、yearmonth、year、datetime、daterange、timerange、yearmonthrange、yearrange、datetimerange、custom 是 下拉类型
props Object { label: label, value: value, children: children } 否 只针对联级下拉选择项cascader，自定义节点 label、value、options 的字段
placeholder String 否 时间选择占位文本
startPlaceholder String 否 时间范围选择占位文本
endPlaceholder String 否 时间范围选择占位文本

事件

事件名称 回调参数 说明
change (data) => void 改变事件，data为当前操作后的数据
reset (data) => void 重置其中一个选中数据，data为当前操作后的数据

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...