vue中实现点击展开和收起功能（具有动画效果）

最新推荐文章于 2025-03-17 11:29:06 发布

Fxhani

最新推荐文章于 2025-03-17 11:29:06 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Fxhani/article/details/103920195

本文介绍如何在Vue中使用Element UI实现点击展开和收起功能，并带有动画效果。通过v-show结合el-collapse-transition组件控制元素显示隐藏，利用data属性切换状态。同时，通过CSS实现元素样式变化和按钮交互。

vue中实现点击展开和收起功能（具有动画效果）

html

在这里插入图片描述

	<div class="marketplace_aside_b">
      <div
        v-for="item in classd"
        :key="item.id"
        class="marketplace_aside_show_that"
      >{{ item.text }}</div>

      <el-collapse-transition>
        <div v-show="show3">
          <div
            v-for="item in classed"
            :key="item.id"
            class="marketplace_aside_show_that"
          >{{ item.text }}</div>
        </div>
      </el-collapse-transition>
      <el-button @click="show3 = !show3" class="marketplace_show_more">{{word}}</el-button>
    </div>

css

在这里插入图片描述
.marketplace_aside_b .marketplace_aside_show_that {
height: 35px;
line-height: 35px;
font-size: 14px;
padding-left: 33px;
transition: all 0.5s ease;
}
.marketplace_aside_b .marketplace_aside_show_that:hover{
background-color: #4393FD;
cursor: pointer;
}
.marketplace_aside_b .marketplace_show_more {
width: 101px;
height: 38px;
background-color: #4393FD;
color: #fff;
text-align: center;
margin-left: 70px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
margin-top: 10px;
margin-bottom: 20px;
}

鼠标经过会有一个蓝色的背景颜色，展现的效果如下：
在这里插入图片描述

script

要去引入组件js文件

在这里插入图片描述

import “element-ui/lib/theme-chalk/base.css”;
// collapse 展开折叠
import CollapseTransition from “element-ui/lib/transitions/collapse-transition”;
import Vue from “vue”;

还有要去components方法中暴露这个组件

在这里插入图片描述

return返回的数值

data() {
return {
show3: false,
classd: [
{ id: 1, text: “分类1” },
{ id: 2, text: “分类2” },
{ id: 3, text: “分类3” },
{ id: 4, text: “分类4” }
],
classed: [
{ id: 5, text: “分类5” },
{ id: 6, text: “分类6” },
{ id: 7, text: “分类7” },
{ id: 8, text: “分类8” }
],

最后computed 方法改变按钮文字

在这里插入图片描述
computed: {
word: function() {
if (this.show3 == false) {
//对文字进行处理
return “展开”;
} else {
return “收起”;
}
}
}

效果完成

在这里插入图片描述

如果想实现点击时变色效果，有以下两种方法，两者区别在

:active，元素被点击时变色，但颜色在点击后消失

:focus，元素被点击后变色，且颜色在点击后不消失

但是由于div等元素无法接受键盘或其他用户事件，即不支持:focus伪类，可通过增加tabIndex属性使其支持:focus，如下所示：

 <div
        v-for="item in classd"
        :key="item.id"
        class="marketplace_aside_show_that"
         tabindex="4"
      >{{ item.text }}</div>

css:

.marketplace_aside_b .marketplace_aside_show_that:focus {
background-color: #4393FD;
color: #fff;
}