129 lines
3.3 KiB
Markdown
129 lines
3.3 KiB
Markdown
### dropdownMenu 下拉菜单
|
||
|
||
**使用方法：**
|
||
|
||
```
|
||
<dropdownMenu :modelList.sync="modelList" :disList="disList" :cityList="cityList" :searchList="searchList" :labelList.sync="labelList" @searchFinish="searchFinish"/>
|
||
```
|
||
|
||
```
|
||
import dropdownMenu from '@/uni_modules/piaoyi-dropdownMenu/components/piaoyi-dropdownMenu/piaoyi-dropdownMenu.vue'
|
||
export default {
|
||
components: {
|
||
dropdownMenu
|
||
},
|
||
data() {
|
||
return {
|
||
modelList: [{
|
||
title: '类型1',
|
||
children: [{
|
||
name: '类型1-1',
|
||
value: '类型1-1'
|
||
}, {
|
||
name: '类型1-2',
|
||
value: '类型1-2'
|
||
}, {
|
||
name: '类型1-3',
|
||
value: '类型1-3'
|
||
}, {
|
||
name: '类型1-4',
|
||
value: '类型1-4'
|
||
}]
|
||
}, {
|
||
title: '类型2',
|
||
children: [{
|
||
name: '类型2-1',
|
||
value: '类型2-1'
|
||
}, {
|
||
name: '类型2-2',
|
||
value: '类型2-2'
|
||
}, {
|
||
name: '类型2-3',
|
||
value: '类型2-3'
|
||
}, {
|
||
name: '类型2-4',
|
||
value: '类型2-4'
|
||
}]
|
||
}],
|
||
disList: [{
|
||
name: '附近',
|
||
id: 1
|
||
}, {
|
||
name: '3公里',
|
||
id: 3
|
||
}, {
|
||
name: '5公里',
|
||
id: 5
|
||
}, {
|
||
name: '10公里',
|
||
id: 10
|
||
}, {
|
||
name: '15公里',
|
||
id: 15
|
||
}, {
|
||
name: '20公里',
|
||
id: 20
|
||
}],
|
||
cityList: [{
|
||
id: "420102",
|
||
name: "江岸区"
|
||
},
|
||
{
|
||
id: "420103",
|
||
name: "江汉区"
|
||
}
|
||
],
|
||
searchList: [{
|
||
name: '智能排序',
|
||
value: 0
|
||
}, {
|
||
name: '距离优先',
|
||
value: 1
|
||
}],
|
||
labelList: [{
|
||
id: '标签1',
|
||
name: '标签1'
|
||
}, {
|
||
id: '标签2',
|
||
name: '标签2'
|
||
}, {
|
||
id: '标签3',
|
||
name: '标签3'
|
||
}, {
|
||
id: '标签3',
|
||
name: '标签3'
|
||
}, {
|
||
id: '标签4',
|
||
name: '标签4'
|
||
}],
|
||
}
|
||
},
|
||
methods: {
|
||
<!-- 筛选结果回调 -->
|
||
searchFinish(result) {
|
||
console.log(result)
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 事件说明
|
||
|
||
| 事件名 | 返回值 | 描述 |
|
||
| :---------: | :----: | :------------: |
|
||
| @searchFinish | 例：{models: "类型1-1,类型1-4,类型2-1", distince: 3, searchIndex: 1, labels: "标签3,标签2,标签1,标签4"} | 筛选结果回调函数 |
|
||
|
||
#### Prop
|
||
|
||
| 参数名称 | 描述 |
|
||
| -------- | ------------------------------ |
|
||
| modelList | 标签选项数组，注意prop处加上 .sync，具体格式请看上面的示例 |
|
||
| disList | 距离选项数组，具体格式请看上面的示例 |
|
||
| cityList | 地区选项数组，具体格式请看上面的示例 |
|
||
| searchList | 排序规则数组，具体格式请看上面的示例 |
|
||
| labelList | 标签选项数组，注意prop处加上 .sync，具体格式请看上面的示例 |
|
||
| duration | 滑动动画时长 |
|
||
|
||
### 可接定制化组件开发
|
||
### 右侧有本人代表作小程序二维码，可以扫码体验
|
||
### 如使用过程中有问题或有一些好的建议，欢迎加QQ群互相学习交流：120594820 |