init
This commit is contained in:
167
components/op-drop-down/readme.md
Normal file
167
components/op-drop-down/readme.md
Normal file
@@ -0,0 +1,167 @@
|
||||
# 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为当前操作后的数据 |
|
||||
Reference in New Issue
Block a user