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使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
关于vue-router-link选择样式设置
Apr 30 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 管理系统程序中的后门
2009/08/05 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python 简单的多线程链接实现代码
2016/08/28 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Python selenium的基本使用方法分析
2019/12/21 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
公司晚会主持词
2014/03/22 职场文书
建国大业观后感800字
2015/06/01 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电