| | |
| | | */ |
| | | |
| | | <template> |
| | | <view class="c-filter"> |
| | | <view |
| | | class="c-filter" |
| | | ref="filter" |
| | | > |
| | | <view |
| | | class="c-filter-bar" |
| | | v-if="bar" |
| | |
| | | :value="filterRes[item.name]" |
| | | :onChange="evt=>handleItemChange(item.name, evt)" |
| | | /> |
| | | <CFilterRadio |
| | | v-if="item.type==='radio'" |
| | | type="item" |
| | | :label="item.label" |
| | | :options="selectOptions[item.name] || []" |
| | | :value="filterRes[item.name]" |
| | | :onChange="evt=>handleItemChange(item.name, evt)" |
| | | /> |
| | | <CFilterInput |
| | | v-if="item.type==='input'" |
| | | type="item" |
| | | :label="item.label" |
| | | :value="filterRes[item.name]" |
| | | :onChange="evt=>handleItemChange(item.name, evt)" |
| | | /> |
| | | </view> |
| | | </scroll-view> |
| | | <view class="c-filter-drawer-btn"> |
| | |
| | | import { CDrawer } from '@components/layout/drawer'; |
| | | import CFilterSelect from './CFilterSelect'; |
| | | import CFilterDateRange from './CFilterDateRange'; |
| | | import CFilterRadio from './CFilterRadio'; |
| | | import CFilterInput from './CFilterInput'; |
| | | import './cFilter.scss'; |
| | | |
| | | export default { |
| | |
| | | AtButton, |
| | | CFilterSelect, |
| | | CFilterDateRange, |
| | | CFilterRadio, |
| | | CFilterInput, |
| | | CDrawer, |
| | | }, |
| | | props: { |
| | |
| | | filterRes: this.filterData || {}, |
| | | // 抽屉显示隐藏 |
| | | drawerShow: false, |
| | | // 抽屉内容显示隐藏(抽屉展开动画完成后再渲染表单,否则出现动画卡顿) |
| | | // drawerDisplay: false, |
| | | // 面板项有已选 |
| | | itemsFilled: false, |
| | | // 本次打开是否有改变 |
| | |
| | | methods: { |
| | | handleOpen() { |
| | | this.drawerShow = true; |
| | | // $(this.$refs.drawer).addClass('on'); |
| | | }, |
| | | handleBarChange(name, value) { |
| | | this.$set(this.filterRes, name, value); |
| | |
| | | this.onChange(this.filterRes); |
| | | }, |
| | | handleFinish() { |
| | | // $(this.$refs.drawer).removeClass('on'); |
| | | this.drawerShow = false; |
| | | // 有项目改变时,发送变化 |
| | | if (this.itemsChanged) { |
| | |
| | | } |
| | | }, |
| | | }, |
| | | mounted() {}, |
| | | mounted() { |
| | | $(this.$refs.filter).parent().css({ transform: 'translate(0,0);' }); |
| | | }, |
| | | }; |
| | | </script> |