点击按钮div展开收起

真的不想哇

于 2021-08-04 16:40:42 发布

阅读量974

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： js

本文链接：https://blog.youkuaiyun.com/xiaoHelloWord/article/details/119387595

vue 专栏收录该内容

26 篇文章

订阅专栏

在这里插入图片描述

点击按钮下方收起展开

<el-button size="mini" type="warning" circle @click="fun_animate" style="height:28px">
	<i v-if="is_show" class="el-icon-caret-bottom"></i>
	<i v-if="!is_show" class="el-icon-caret-top"></i>
</el-button>


<div  class="tanSerch child_right_slider" ref="box">
</div>

//定义css和ref
.tanSerch {
	transition: all 0.3s linear 0s;
}
.child_right_slider {
	width: 100%;
	height:0;
	overflow:hidden;
}

在data定义
is_show:true,



方法中定义
fun_animate() {
	let that = this
	if (that.is_show) {
		that.$refs.box.style.height = "60px";
	} else {
		that.$refs.box.style.height = '0';
	}
	that.is_show = !that.is_show;
},