| | |
| | | :value="filterRes[bar.name]" |
| | | :onChange="evt=>handleBarChange(bar.name, evt)" |
| | | /> |
| | | <CFilterDateRange |
| | | v-if="bar.type==='dateRange'" |
| | | type="bar" |
| | | :label="bar.label" |
| | | :value="filterRes[bar.name]" |
| | | :onChange="evt=>handleItemChange(bar.name, evt)" |
| | | /> |
| | | </view> |
| | | <view |
| | | class="c-filter-more" |
| | |
| | | <scroll-view |
| | | class="c-filter-drawer-list" |
| | | :scrollY="true" |
| | | v-if="drawerDisplay" |
| | | > |
| | | <view |
| | | class="box" |
| | | v-for="(item,index) of items" |
| | | v-for="(item,index) in items" |
| | | :key="index" |
| | | > |
| | | <CFilterSelect |
| | |
| | | }, |
| | | props: { |
| | | // 筛选横条项目 |
| | | bar: Object, |
| | | bar: { type: Object, default: {} }, |
| | | // 筛选展开层项目列表 |
| | | items: Array, |
| | | items: { type: Array, default: [] }, |
| | | // 各个项目的选项列表 |
| | | selectOptions: Object, |
| | | selectOptions: { type: Object, default: {} }, |
| | | // 筛选变化时的回调 |
| | | onChange: Function, |
| | | }, |
| | |
| | | return { |
| | | filterRes: {}, |
| | | drawerShow: false, |
| | | drawerDisplay: false, |
| | | // 面板项有已选 |
| | | itemsFilled: false, |
| | | // 本次打开是否有改变 |
| | |
| | | methods: { |
| | | handleOpen() { |
| | | this.drawerShow = true; |
| | | this.$nextTick(() => { |
| | | setTimeout(() => { |
| | | this.drawerDisplay = true; |
| | | }, 80); |
| | | }); |
| | | }, |
| | | handleBarChange(name, value) { |
| | | this.$set(this.filterRes, name, value); |
| | | this.onChange(this.filterRes); |
| | | }, |
| | | handleItemChange(name, value) { |
| | | console.log(name, value); |
| | | this.$set(this.filterRes, name, value); |
| | | this.itemsChanged = true; |
| | | // 如果变化值不为空 |
| | |
| | | }, |
| | | handleFinish() { |
| | | this.drawerShow = false; |
| | | this.$nextTick(() => { |
| | | this.drawerDisplay = false; |
| | | }); |
| | | // 有项目改变时,发送变化 |
| | | if (this.itemsChanged) { |
| | | this.itemsChanged = false; |