YXGJ/components/filtrate-group.vue

<template>
    <view class="group-box">
        <view class="title" v-if="item.title">{{ item.title }}</view>
        <view class="options">
            <view class="option" :class="(option[item.selected] == item.value) ? 'active' : ''" v-for="option in item.rang"
                :key="option[item.selected]" hover-class="navigator-hover" @click="change(option)">
                {{ option[item.showKey || item.selected] }}
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        item: {
            type: Object
        },
        rowIndex: {
            type: [String, Number]
        },
        onChange: {
            type: Function
        }
    },
    watch: {
        item(val) {
            console.log(val)
        }
    },
    data() {
        return {
            show: true
        }
    },
    methods: {
        change(option) {
            this.$emit("onChange", option, this.rowIndex)
        }
    },
}
</script>

<style lang="scss">
.group-box {
    padding: 10px;
    padding-left: 0px;
    box-sizing: border-box;

    .title {
        line-height: 22px;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
        box-sizing: border-box;
        padding-left: 10px;
    }

    .options {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding-left: 5px;

        .option {
            min-width: 72px;
            padding: 6px;
            font-family: PingFang SC, PingFang SC;
            text-align: center;
            font-size: 14px;
            color: #333333;
            margin: 10px 0 0 5px;
            background: #F2F2F2;
            border-radius: 5px;
        }

        .active {
            color: #FFFFFF;
            background: #C30D23;
        }
    }
}
</style>