前端vue自定義簡單實用下拉篩選 下拉選單, 下載完整代碼請訪問: https://ext.dcloud.net.cn/plugin?id=13020
效果圖如下:
#### 使用方法
```使用方法
<!-- titleArr: 選擇項陣列 dropArr: 下拉項陣列 @finishDropClick: 下拉篩選完成事件-->
<ccDropDownMenu :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick" ></ccDropDownMenu>
```
#### HTML代碼部分
```html
<template>
<view >
<!-- titleArr: 選擇項陣列 dropArr: 下拉項陣列 @finishDropClick: 下拉篩選完成事件-->
<ccDropDownMenu :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick" ></ccDropDownMenu>
</view>
</template>
```
#### JS代碼 （引入組件 填充資料）
```javascript
<script>
import ccDropDownMenu from '../../components/ccDropDownMenu.vue'
export default {
components:{
ccDropDownMenu
},
data() {
return {
titleArr:['區域', '戶型', '面積', '價格'],
dropArr:[
// 區域
[{
text: '不限',
value: ""
},
{
text: '荔灣區',
value: "440103"
}, {
text: '越秀區',
value: "440104"
},
{
text: "海珠區",
value: "440105"
},
{
text: '天河區',
value: "440106"
},
{
text: '白云區',
value: "440111"
},
{
text: '花都區',
value: "440114"
},
{
text: '從化區',
value: "440117"
}, {
text: '南海區',
value: "440605"
}],
// 戶型
[{
text: '不限',
value: ""
},{
text: '單間',
value: "10000"
},
{
text: '一房一廳',
value: "11000"
},
{
text: '兩房一廳',
value: "21000"
},
{
text: '三房一廳',
value: "31000"
}, {
text: '四房兩廳',
value: "42000"
}],
// [@"≤40㎡",@"40-60㎡",@"60-80㎡",@"80-100㎡",@"100-120㎡",@"≥120㎡"]
// 面積
[{
text: '不限',
value: ""
},{
text: '≤40㎡',
value: "0-40"
},
{
text: '40-60㎡',
value: "40-60"
},
{
text: '60-80㎡',
value: "60-80"
},
{
text: '80-100㎡',
value: "80-100"
},
{
text: '100-120㎡',
value: "100-120"
},
{
text: '≥120㎡',
value: "120-99999"
}],
// [@"≤1000",@"1000-1500",@"1500-2000",@"2000-3000",@"3000-4000㎡,@"≥4000"]
// 租金
[{
text: '不限',
value: ""
},{
text: '≤1000元',
value: "0-1000"
},
{
text: '1000-1500元',
value: "1000-1500"
},
{
text: '1500-2000元',
value: "1500-2000"
},
{
text: '2000-3000元',
value: "2000-3000"
},
{
text: '3000-4000元',
value: "3000-4000"
},
{
text: '≥4000元',
value: "4000-99999"
}]],
filterResultData:[]
}
},
onLoad() {
},
methods: {
finishClick(resultData){
this.filterResultData =https://www.cnblogs.com/ccVue/archive/2023/06/13/ resultData;
uni.showModal({
title:'溫馨提示',
content:'篩選資料 = ' + JSON.stringify(resultData)
})
}
}
}
</script>
```
#### CSS
```css
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
```
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555115.html
標籤：其他
下一篇：返回列表