cmgd-mini-app/components/op-drop-down

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为当前操作后的数据