feat:'筛选项第一项支持input'

chensiAb

2024-05-15 327839229273a90bd9ca0c6112f32f9e2f49ca1a

feat:'筛选项第一项支持input'

 plugins/filter/CFilter.vue

@@ -1,37 +1,35 @@
/**
 * CFilter - 页面筛选
 * @author Tevin
 */
/** * CFilter - 页面筛选 * @author Tevin */

<template>
    <view
        class="c-filter"
        ref="filter"
    >
        <view
            class="c-filter-bar"
            v-if="bar"
        >
    <view class="c-filter" ref="filter">
        <view class="c-filter-bar" v-if="bar">
            <CFilterSelect
                v-if="bar.type==='select'"
                v-if="bar.type === 'select'"
                type="bar"
                :label="bar.label"
                :options="selectOptions[bar.name] || []"
                :cancelable="bar.cancelable"
                :value="filterRes[bar.name]"
                :onChange="evt=>handleBarChange(bar.name, evt)"
                :onChange="evt => handleBarChange(bar.name, evt)"
            />
            <CFilterDateRange
                v-if="bar.type==='dateRange'"
                v-if="bar.type === 'dateRange'"
                type="bar"
                :label="bar.label"
                :value="filterRes[bar.name]"
                :onChange="evt=>handleBarChange(bar.name, evt)"
                :onChange="evt => handleBarChange(bar.name, evt)"
            />
            <CFilterInput
                v-if="bar.type === 'input'"
                type="bar"
                :label="bar.label"
                :value="filterRes[bar.name]"
                :onChange="evt => handleItemChange(bar.name, evt)"
            />
        </view>
        <view
            class="c-filter-more"
            :class="itemsFilled?'on':''"
            :class="itemsFilled ? 'on' : ''"
            v-if="items && items.length > 0"
            @tap="evt => handleOpen()"
        >
@@ -43,58 +41,47 @@
            :show="drawerShow"
            :onClose="evt => handleFinish()"
        >
            <scroll-view
                class="c-filter-drawer-list"
                :scrollY="true"
            >
                <view
                    class="box"
                    v-for="(item,index) in items"
                    :key="index"
                >
            <scroll-view class="c-filter-drawer-list" :scrollY="true">
                <view class="box" v-for="(item, index) in items" :key="index">
                    <CFilterSelect
                        v-if="item.type==='select'"
                        v-if="item.type === 'select'"
                        type="item"
                        :label="item.label"
                        :options="selectOptions[item.name] || []"
                        :value="filterRes[item.name]"
                        :onChange="evt=>handleItemChange(item.name, evt)"
                        :onChange="evt => handleItemChange(item.name, evt)"
                    />
                    <CFilterDateRange
                        v-if="item.type==='dateRange'"
                        v-if="item.type === 'dateRange'"
                        type="item"
                        :label="item.label"
                        :value="filterRes[item.name]"
                        :onChange="evt=>handleItemChange(item.name, evt)"
                        :onChange="evt => handleItemChange(item.name, evt)"
                    />
                    <CFilterRadio
                        v-if="item.type==='radio'"
                        v-if="item.type === 'radio'"
                        type="item"
                        :label="item.label"
                        :options="selectOptions[item.name] || []"
                        :value="filterRes[item.name]"
                        :onChange="evt=>handleItemChange(item.name, evt)"
                        :onChange="evt => handleItemChange(item.name, evt)"
                    />
                    <CFilterInput
                        v-if="item.type==='input'"
                        v-if="item.type === 'input'"
                        type="item"
                        :label="item.label"
                        :value="filterRes[item.name]"
                        :onChange="evt=>handleItemChange(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>
                <AtButton type="primary" :circle="false" :onClick="evt => handleClean()"
                    >重置</AtButton
                >
                <AtButton type="primary" :circle="false" :onClick="evt => handleFinish()"
                    >完成</AtButton
                >
            </view>
        </CDrawer>
    </view>

 plugins/filter/cFilter.scss

@@ -3,7 +3,7 @@
 * @author Tevin
 */

@import "../../common/sassMixin";
@import '../../common/sassMixin';

.c-filter {
    width: 100%;
@@ -23,6 +23,13 @@
        &:active {
            background-color: #f2f2f2;
        }
        .c-filter-input {
            display: flex;
            align-items: center;
            .at-input {
                margin-left: 14px;
            }
        }
    }
    .c-filter-more {
        float: right;
@@ -30,8 +37,8 @@
        height: 100%;
        box-sizing: border-box;
        text-align: center;
        border-left: 1PX solid #d6e4ef;
        transition: background-color .3s;
        border-left: 1px solid #d6e4ef;
        transition: background-color 0.3s;
        &:active {
            background-color: #f2f2f2;
        }
@@ -43,7 +50,7 @@
                @include position(absolute, 20px n n 35px);
                width: 12px;
                height: 12px;
                content: " ";
                content: ' ';
                background-color: $colorDanger;
                border-radius: 50%;
            }
@@ -55,12 +62,12 @@
    .c-filter-drawer {
        .c-filter-drawer-list {
            height: calc(100% - 90px);
            border-top: 1PX solid #eee;
            border-top: 1px solid #eee;
            box-sizing: border-box;
            .box {
                min-height: 20px;
                padding: 30px 0 10px 30px;
                border-bottom: 1PX solid #eee;
                border-bottom: 1px solid #eee;
                &:active {
                    background-color: #f2f2f2;
                }
@@ -86,4 +93,4 @@
            }
        }
    }
}
}