167 lines
6.8 KiB
Markdown
167 lines
6.8 KiB
Markdown
# op-drop-down
|
||
# 前端UI下拉选择组件，
|
||
|
||
### 使用方式
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
```javascript
|
||
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为当前操作后的数据 | |