重写筛选组件单选控件

Tevin

2023-08-18 fe114d0f8524ee7ce817d17a48ac69758bac8b3d

重写筛选组件单选控件

 plugins/filter/CFilter.vue

@@ -67,10 +67,11 @@
                        :value="filterRes[item.name]"
                        :onChange="evt=>handleItemChange(item.name, evt)"
                    />
                    <CFilterSwitchRadio
                        v-if="item.type==='switchRadio'"
                    <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)"
                    />
@@ -106,7 +107,7 @@
import { CDrawer } from '@components/layout/drawer';
import CFilterSelect from './CFilterSelect';
import CFilterDateRange from './CFilterDateRange';
import CFilterSwitchRadio from './CFilterSwitchRadio';
import CFilterRadio from './CFilterRadio';
import CFilterInput from './CFilterInput';
import './cFilter.scss';

@@ -117,7 +118,7 @@
        AtButton,
        CFilterSelect,
        CFilterDateRange,
        CFilterSwitchRadio,
        CFilterRadio,
        CFilterInput,
        CDrawer,
    },
@@ -199,7 +200,6 @@
    },
    mounted() {
        $(this.$refs.filter).parent().css({ transform: 'translate(0,0);' });
        console.log(this.filterRes);
    },
};
</script>

 plugins/filter/CFilterRadio.vue

New file
@@ -0,0 +1,60 @@
/**
 * CFilterRadio - 筛选项目，单选
 * @author Tevin
 */

<template>
    <view
        class="c-filter-radio"
        :class="'type-'+type"
    >
        <view
            class="label"
            v-if="type==='item'"
        >{{label}}</view>
        <view class="content">
            <view
                class="c-filter-radio-item"
                v-for="item of options"
                :key="item.value"
                @tap="evt => handleChange(item.value)"
            >
                <view
                    class="c-filter-radio-icon"
                    :class="value === item.value ? 'checked' : ''"
                >
                    <AtIcon value="check" />
                </view>
                <view class="c-filter-radio-label">{{item.label || item.name}}</view>
            </view>
        </view>
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { AtIcon } from 'taro-ui-vue';
import './cFilterRadio.scss';

export default {
    name: 'CFilterRadio',
    components: {
        AtIcon,
    },
    props: {
        type: String,
        label: String,
        options: Array,
        value: [String, Number],
        onChange: Function,
    },
    data() {
        return {};
    },
    methods: {
        handleChange(value) {
            this.onChange(value);
        },
    },
};
</script>

 plugins/filter/CFilterSwitchRadio.vue

File was deleted

 plugins/filter/cFilterRadio.scss

New file
@@ -0,0 +1,45 @@
/**
 * CFilterSwitchRadio
 * @author Tevin
 */

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

.c-filter-radio {
    .label {
        color: #666;
        line-height: 40px;
    }
    .content {
        .c-filter-radio-item {
            display: inline-block;
            padding-right: 24px;
        }
        .c-filter-radio-icon {
            @include flexbox(inline, center center);
            width: 48px;
            min-width: 48px;
            height: 48px;
            vertical-align: middle;
            color: transparent;
            font-size: 32px;
            line-height: 1;
            border: 1PX solid #c9c9c9;
            border-radius: 50%;
            background-color: #fff;
            box-sizing: border-box;
            transition: all .2s;
            &.checked {
                color: #fff;
                border: none;
                background-color: #2093df;
            }
        }
        .c-filter-radio-label {
            display: inline-block;
            vertical-align: middle;
            padding-left: 6px;
        }
    }
    &.type-item {}
}

 plugins/filter/cFilterSwitchRadio.scss

File was deleted