【Vue2】展开收起功能

一. 效果图

1. 默认收起
   
2. 点击展开
   

二. 实现

1. 方法一：初始化赋值

<template>
	<div :class="showAll ? 'search_content' : 'search_content_active'">
		<span v-for="(item, index) in defaultTagsList" :key="index">
			{{item.name}}
		</span>
		<div class="search_fload" @click="handFload">
			<i :class="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
			<span class="fload_is_show"> {{ showAll ? "收起" : "展开更多筛选项" }} </span>
		<div>
	<div>
</template>

<script>
import { getTagTree } from "@/api/xxx"

export default{
	data(){
		return{
			defaultTagsList: [], // 默认标签项
            allTagList: [], // 所有标签项,
            showAll:false
		}
	},
	methods:{
		/**
         * 初始化列表数据
         */
		fetchData(){
            getTagTree().then(res => {
                if (res.success) {
                    // 合并：所有标签
                    this.allTagList = res.data;
                    // 收起：展示首个标签
                    this.showAll = false;
                    this.defaultTagsList = [res.data[0]];
                }
            })
		},
		
		/**
         * 展开或合并
         */
        handFload() {
            this.showAll = !this.showAll;
            if (this.showAll) {
                this.defaultTagsList = this.allTagList;
            } else {
                this.defaultTagsList = [this.allTagList[0]];
            }
        }
	}
}
</script>

<style lang="less" scoped>
.search_content{
    min-height: 230px;
    width: 1500px;
    left: 50%;
    margin-left: -750px;
    background: #fff;
    z-index: 2000;
    position: absolute;
}

.search_content_active {
    margin: 0 auto;
    width: 1500px;
    background: #fff;
    z-index: 2000;
}

.search_fload{
	text-align:center;
	cursor: pointer;
	
	.fload_is_show {
            display: inline-block;
            margin-left: 10px;
        }
}
</style>

2. 方法二：三目判断

<template>
	<div :class="showAll ? 'search_content' : 'search_content_active'">
		<span v-for="(item, index) in showAll ? allTagList : allTagList.slice(0, 1) " :key="index">
			{{item.name}}
		</span>
		<div class="search_fload" @click="showAll = !showAll">
			<i :class="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
			<span class="fload_is_show"> {{ showAll ? "收起" : "展开更多筛选项" }} </span>
		<div>
	<div>
</template>

<script>
import { getTagTree } from "@/api/xxx"

export default{
	data(){
		return{
            allTagList: [], // 所有标签项,
            showAll:false
		}
	},
	methods:{
		/**
         * 初始化列表数据
         */
		fetchData(){
            getTagTree().then(res => {
                if (res.success) {
                    // 合并：所有标签
                    this.allTagList = res.data;
                }
            })
		},
	}
}
</script>

<style lang="less" scoped>
.search_content{
    min-height: 230px;
    width: 1500px;
    left: 50%;
    margin-left: -750px;
    background: #fff;
    z-index: 2000;
    position: absolute;
}

.search_content_active {
    margin: 0 auto;
    width: 1500px;
    background: #fff;
    z-index: 2000;
}

.search_fload{
	text-align:center;
	cursor: pointer;
	
	.fload_is_show {
            display: inline-block;
            margin-left: 10px;
        }
}
</style>