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编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 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
TP5框架实现签到功能的方法分析
2020/04/05 PHP
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
js点击选择文本的方法
2015/02/09 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
vue生命周期实例小结
2018/08/15 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python操作gitlab API过程解析
2019/12/27 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
java程序员面试交流
2012/11/29 面试题
2014婚礼司仪主持词
2014/03/14 职场文书
名人演讲稿范文
2014/09/16 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
城管个人总结
2015/02/28 职场文书
个人工作决心书
2015/09/22 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB