vue element-ul实现展开和收起功能的实例代码


Posted in Vue.js onNovember 25, 2020

实现效果如下:

vue element-ul实现展开和收起功能的实例代码

vue element-ul实现展开和收起功能的实例代码

  需求:

由于后台搜索选项有很多,影响页面美观,所以一进来要隐藏一部分搜索项,只保留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 element-ul实现展开和收起功能的实例代码的文章就介绍到这了,更多相关vue element-ul展开和收起内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
浅析VUE防抖与节流
Nov 24 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue中activated的用法
Jan 03 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
在Vue中使用mockjs代码实例
Nov 25 #Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 #Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 #Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 #Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 #Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 #Vue.js
浅析VUE防抖与节流
Nov 24 #Vue.js
You might like
SONY SRF-M100的电路分析
2021/03/02 无线电
学习php开源项目的源码指南
2014/12/21 PHP
php实现生成验证码实例分享
2016/04/10 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
Node.js的特点详解
2017/02/03 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
python speech模块的使用方法
2020/09/09 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
Linux的文件类型
2012/03/07 面试题
国际会议邀请函范文
2014/01/16 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
朋友聚会开场白
2015/06/01 职场文书
学习雷锋主题班会
2015/08/14 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL