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]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部