文章目录
收缩效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/84d3fd637b3e1d526cb6af898c38758d.png)
展开效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/efac4350600a2bcc701f79b01951aad9.png)
<section :class="`w-full ${arrowDown ? 'h-39px overflow-hidden' : ''}`">
<!-- 实际选项 -->
<el-row class="zlc-tag-row">
<el-col
v-for="(tag, index) in [defaultOption, ...tagList]" :key="index" class="zlc-tag mr-2 mb-2"
:class="{ 'zlc-tag__checked': tag.checked }" :title="tag.label" :xs="12" :sm="6" :md="4" :lg="2" :xl="1"
@click.stop="index === 0 ? handleSelectDefault() : handleSelect(tag)"
>
<span class="flex justify-center ">{{ tag.label }}</span>
</el-col>
</el-row>
</section>
<el-icon :class="`${arrowDown ? 'rotate-fade-reverse' : 'rotate-fade'} cursor-pointer block`">
<ArrowDownBold @click="arrowDown = !arrowDown" />
</el-icon>
// js
const arrowDown = ref<boolean>(true)
// CSS动画
.rotate-fade {
transform: rotate(180deg);
transition: transform .25s linear;
}
.rotate-fade-reverse {
transform: rotate(0deg);
transition: transform .25s linear;
}
重点是通过arrowDown 的值控制显示的高度及隐藏