imt-micro/src/components/filter/Application.vue

<template>
    <div class="filterInfo">
        <div class="title" @click="showMore = !showMore">
            <h4>应用领域</h4>
            <van-icon :custom-class="showMore ? 'showMore' : ''" name="arrow-down" color="#CBCFDB" :size="18" />
        </div>
        <div class="list" :class="{ showLess: !showMore }">
            <block v-for="item in list" :key="item.id">
                <van-button
                    :custom-class="chooseList.includes(item.id) ? 'chooseActive' : 'choose'"
                    type="default"
                    :color="chooseList.includes(item.id) ? '#FFF4E5' : '#F5F7FA'"
                    @click="choose(item.id)"
                >
                    {{ getName(item) }}

                    <img
                        v-if="chooseList.includes(item.id)"
                        src="../../static/imgs/icon_list_xuanzhong.png"
                        class="chooseImg"
                        alt=""
                    />
                </van-button>
            </block>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    computed: {
        valueList() {
            if (this.value) {
                return this.value.split(',').map(item => {
                    Number(item);
                });
            } else {
                return [];
            }
        }
    },
    data() {
        return {
            list: [],
            showMore: false,
            chooseList: []
        };
    },
    mounted() {
        this.$http.get('/productTag/application').then(res => {
            this.list = res;
        });
    },
    methods: {
        choose(id) {
            const list = [...this.chooseList];
            if (list.includes(id)) {
                const index = list.indexOf(id);
                list.splice(index, 1);
            } else {
                list.push(id);
            }
            this.chooseList = list;
            this.$emit('input', list.join(','));
        }
    },
    watch: {
        value() {
            if (this.value && this.chooseList.length === 0) {
                this.$nextTick(() => {
                    this.chooseList = [...this.valueList];
                });
            } else if (!this.value && this.chooseList.length !== 0) {
                this.chooseList = [];
            }
        }
    }
};
</script>
<style lang="less">
.filterInfo {
    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .van-icon {
            transition: transform ease-in-out 0.3s;
            &.showMore {
                transform: rotate(180deg);
            }
        }
    }
    .list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        overflow: hidden;
        transition: max-height ease-in-out 0.3s;
        max-height: 800px;
        &.showLess {
            max-height: 34px;
        }
    }
    .van-button {
        width: 106px;
        box-sizing: border-box;
        height: 34px;
        margin-bottom: 10px;
        &.choose {
            color: #565b66 !important;
        }
        &.chooseActive {
            color: @warn!important;
        }

        .chooseImg {
            position: absolute;
            width: 16px;
            height: 16px;
            right: 0;
            bottom: 0;
        }
    }
}
</style>