vue怎样做点击展开收起的功能?方法是什么?
Admin 2021-10-18 群英技术资�
vue怎样做点击展开收起的功能?在很多网站上都能看到点击展开收起的功能,点击展开收起的效果能让网页设计更简洁好看,也是比较使用的,因此这篇文章就给大家分享一下vue实现点击展开收起效果的方法�
实现效果如下�
需求:
由于后台搜索选项有很多,影响页面美观,所以一进来要隐藏一部分搜索项,只保�1行,
点击【展开搜索】按钮的时候才显示全部,点击【收起搜紀按钮又收起部分,保�1行�
需求分析:
由于不太好控制行数,因为不同屏幕尺寸展示�1行的内容并不相同(不考虑移动端),所以考虑用显示高度来控制�
解决思路�
所以这里通过控制搜索区域的高度来实现展开和收起搜索功能�
页面一进来是收起搜索状态,控制搜索区域的高度为120px,超出部分隐藏�
点击展开搜索的时候,调整搜索区域的高度为”auto"
定义变量:showAll控制状�
代码解析�
<el-button type="text" style="margin-left:10px" id="closeSearchBtn" @click="closeSearch"> {{word}} <i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i> </el-button>
当showAll为false的时候,即搜索区域处于收起状态,此时将按钮文字变为“展开搜索”,图标变为向下(el-icon-arrow-down)
当showAll为ture的时候,即搜索区域全部展开了,将按钮文字变成“收起搜索”,图标变成向上(el-icon-arrow-up)
data(){ return{ showAll:true;//是否展开全部 } } computed: { word: function() { if (this.showAll == false) { //对文字进行处� return "展开搜索"; } else { return "收起搜索"; } } },
mounted()里调用closeSearch函数,页面一进来将this.showAll设为false,即处于收起状态。所以data里最初给showAll定义的时候设为true.
给搜索区域的ID设为“searchBox� �
当showAll为false的时候,设置搜索区域高度�120px,否则高度自动�
mounted() { /** * 收起搜索 */ this.$nextTick(function() { this.closeSearch(); }); }, methods:{ closeSearch() { this.showAll = !this.showAll; var searchBoxHeght = document.getElementById("searchBox"); if (this.showAll == false) { searchBoxHeght.style.height = 60 + "px"; } else { searchBoxHeght.style.height = "auto"; } } }
CSS中关键的设置不要忘记�
#searchBox { overflow: hidden; }
关于vue实现点击展开收起效果的方法就介绍到这,本文代码具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助,想要了解更多vue的内容,大家可以关注其它的相关文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
不少朋友应该都有玩过贪吃蛇小游戏吧,贪吃蛇小游戏可谓是经典游戏了,那么我们如果使用原生JS怎么写一个贪吃蛇小游戏呢?下面就给大家分享使用原生js实现贪吃蛇游戏代码,感兴趣的朋友可以参考学习�
这篇文章给大家分享的是JS中所有字符串转换大写的方法,小编觉得挺实用的,因此分享给大家做个参考,本文使用了toUpperCase()和toLocaleUpperCase()这两个方法,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧�
这篇文章主要为大家详细介绍了原生JS实现图片轮播跑马灯效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
这篇文章主要介绍了js 标签语法使用,在 JavaScript 中提供了标签语句,用于标记指定的代码块,便于跳转到指定的位置。本文来记录一下标签语句的使用方法,需要的朋友可以参考一�
vue中watch是什么?watch就是监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值,用一个函数取代。那么vue中watch的用法又是什么呢?在vue中watch的用法大致有三种,包括常用用法,立即执行和深度监听。下面我们来具有看看�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078