From 41ce4729b48cedc120b504bab76924f995bb47bb Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 01 Apr 2021 16:22:23 +0800
Subject: [PATCH] 完善筛选组件
---
plugins/filter/CFilter.vue | 64 +++++++++++++++++++++++++++----
1 files changed, 55 insertions(+), 9 deletions(-)
diff --git a/plugins/filter/CFilter.vue b/plugins/filter/CFilter.vue
index 924972c..51b0e7c 100644
--- a/plugins/filter/CFilter.vue
+++ b/plugins/filter/CFilter.vue
@@ -15,20 +15,24 @@
:label="bar.label"
:options="selectOptions[bar.name]"
:value="filterRes[bar.name]"
- :onChange="evt=>handleChange(bar.name, evt)"
+ :onChange="evt=>handleBarChange(bar.name, evt)"
/>
</view>
<view
class="c-filter-more"
+ :class="itemsChanged?'on':''"
v-if="items && items.length > 0"
- @tap="evt => drawerShow=true"
- >更多筛选 »</view>
+ @tap="evt => handleOpen()"
+ >
+ <text>更多筛选 </text>
+ <text class="arrow">»</text>
+ </view>
<AtDrawer
class="c-filter-drawer"
mask
right
:show="drawerShow"
- :onClose="evt => drawerShow=false"
+ :onClose="evt => handleFinish()"
>
<scroll-view
class="c-filter-drawer-list"
@@ -45,19 +49,28 @@
:label="item.label"
:options="selectOptions[item.name]"
:value="filterRes[item.name]"
- :onChange="evt=>handleChange(item.name, evt)"
+ :onChange="evt=>handleItemChange(item.name, evt)"
/>
<CFilterDateRange
v-if="item.type==='dateRange'"
type="item"
:label="item.label"
:value="filterRes[item.name]"
- :onChange="evt=>handleChange(item.name, evt)"
+ :onChange="evt=>handleItemChange(item.name, evt)"
/>
</view>
</scroll-view>
<view class="c-filter-drawer-btn">
- 重置 完成
+ <AtButton
+ type="primary"
+ :circle="false"
+ :onClick="evt => handleClean()"
+ >重置</AtButton>
+ <AtButton
+ type="primary"
+ :circle="false"
+ :onClick="evt => handleFinish()"
+ >完成</AtButton>
</view>
</AtDrawer>
</view>
@@ -65,7 +78,7 @@
<script>
import Taro from '@tarojs/taro';
-import { AtDrawer } from 'taro-ui-vue';
+import { AtDrawer, AtButton } from 'taro-ui-vue';
import CFilterSelect from './CFilterSelect';
import CFilterDateRange from './CFilterDateRange';
import './cFilter.scss';
@@ -74,6 +87,7 @@
name: 'CFilter',
components: {
AtDrawer,
+ AtButton,
CFilterSelect,
CFilterDateRange,
},
@@ -91,13 +105,45 @@
return {
filterRes: {},
drawerShow: false,
+ itemsChanged: false,
};
},
methods: {
- handleChange(name, value) {
+ handleOpen() {
+ this.drawerShow = true;
+ },
+ handleBarChange(name, value) {
this.$set(this.filterRes, name, value);
this.onChange(this.filterRes);
},
+ handleItemChange(name, value) {
+ this.handleBarChange(name, value);
+ if (value || typeof value !== 'undefined') {
+ this.itemsChanged = true;
+ } else {
+ let valuehas = false;
+ for (let item of items) {
+ if (
+ this.filterRes[item.name] ||
+ typeof this.filterRes[item.name] !== 'undefined'
+ ) {
+ valuehas = true;
+ break;
+ }
+ }
+ this.itemsChanged = valuehas;
+ }
+ },
+ handleClean() {
+ Object.keys(this.filterRes).forEach(key => {
+ this.filterRes[key] = [][0];
+ });
+ this.itemsChanged = false;
+ this.onChange(this.filterRes);
+ },
+ handleFinish() {
+ this.drawerShow = false;
+ },
},
};
</script>
--
Gitblit v1.9.1