更新记录

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

平台兼容性

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)
        }
    }
}

组件的属性说明如下：

option参数说明：

事件