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+iview实现分页及查询功能
Nov 17 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
详解Python3中ceil()函数用法
2019/02/19 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
建筑公司文秘岗位职责
2013/11/29 职场文书
自荐书模板
2013/12/15 职场文书
微观物理专业自荐信
2014/01/26 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
满月酒主持词
2014/03/27 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2014年校长工作总结
2014/12/11 职场文书
简短清晨问候语
2015/11/10 职场文书
导游词之青岛崂山
2019/12/27 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL