73 lines
4.2 KiB
Markdown
73 lines
4.2 KiB
Markdown
# le-dropdown
|
||
|
||
### 使用方式
|
||
|
||
```javascript
|
||
<le-dropdown
|
||
v-model:menuList="menuList"
|
||
themeColor="#3185FF"
|
||
:duration="300"
|
||
:isCeiling="false"
|
||
@onConfirm="onConfirm"
|
||
@onChange="onChange"
|
||
></le-dropdown>
|
||
```
|
||
### 组件的属性说明如下：
|
||
|
||
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|
||
| ---------------- | ------- | ------- | ---- | ------------------------------ |
|
||
| v-model:menuList | Array | [] | 是 | 设置整个菜单筛选的配置数居 |
|
||
| themeColor | String | #3185FF | 否 | 整个组件的主题颜色 |
|
||
| duration | Number | 300 | 否 | 动画的执行时间 |
|
||
| isCeiling | Boolean | false | 否 | 是否自动吸顶（采用sticky规则） |
|
||
|
||
#### menuList参数说明：
|
||
|
||
| 属性 | 类型 | 必填 | 说明 |
|
||
| -------------- | --------------------- | ---- | ---------------------------------------------------------- |
|
||
| title | String | 是 | 菜单名称 |
|
||
| type | String | 是 | 菜单筛选展示的类型：cell\|picker\|sort\|click\|filter |
|
||
| value | Number\|String\|Array | 是 | 菜单对应的值 |
|
||
| options | Array | 否 | 菜单配置的组件参数数据，**见下**： |
|
||
| children | Array | 否 | 菜单配置的组件参数数据（当前只用在filter类型），**见下**： |
|
||
| componentProps | Object | 否 | 菜单对应type的组件参数（当前只用在picker类型），**见下**： |
|
||
|
||
##### options参数说明：
|
||
|
||
| 属性 | 类型 | 必填 | 说明 |
|
||
| -------- | -------------- | ---- | ------------------------------- |
|
||
| label | String | 是 | 属性名，显示在页面上 |
|
||
| value | Number\|String | 是 | 属性值，保存在父级的value属性上 |
|
||
| children | options[] | 否 | 子层级（当前只在picker上使用） |
|
||
|
||
##### **children参数（filter）说明：**
|
||
|
||
| 属性 | 类型 | 必填 | 说明 |
|
||
| ------- | -------------- | ---- | ------------------------------------------- |
|
||
| title | String | 是 | 菜单名称 |
|
||
| type | String | 是 | 菜单筛选展示的类型：radio\|slider\|checkbox |
|
||
| value | Number\|String | 是 | 菜单对应的值 |
|
||
| options | Array | 是 | 菜单配置的组件参数数据，**见上**： |
|
||
|
||
###### children下type参数说明：
|
||
|
||
- radio：单选
|
||
- checkbox：多选
|
||
- slider：进度（存在componentProps与type同级参数，对象里的值为uniapp原生的slider里的参数）
|
||
|
||
##### componentProps参数（picker）说明：
|
||
|
||
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|
||
| ---------- | ------ | ------------------------------------------------------ | ---- | --------------------------------------- |
|
||
| colNum | Number | 1 | 否 | 级联的列数 |
|
||
| options | Array | - | 是 | 菜单配置的组件参数数据，**见上**： |
|
||
| fieldNames | Object | { label: `label`, value: `value`, options: `options` } | 否 | 自定义节点 label、value、options 的字段 |
|
||
|
||
### 事件
|
||
|
||
| 事件名称 | 回调参数 | 说明 |
|
||
| --------- | -------------------- | ------------------------------------------------------------ |
|
||
| onConfirm | (data) => void | 确定事件回调，data为当前确认选中的菜单数据 |
|
||
| onChange | (data,index) => void | 改变事件，data为当前操作菜单数据，index为当前操作菜单第index个索引发生变化 |
|
||
|