vue中实现点击展开和收起功能(具有动画效果)
html
<div class="marketplace_aside_b"><divv-for="item in classd":key="item.id"class="marketplace_aside_show_that">{{ item.text }}</div><el-collapse-transition><div v-show="show3"><divv-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,如下所示:
<divv-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;}