vue3怎么实现搜索项超过n行就折叠

这篇文章主要介绍了vue3怎么实现搜索项超过n行就折叠的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3怎么实现搜索项超过n行就折叠文章都会有所收获，下面我们一起来看看吧。

创新互联专业为企业提供万安网站建设、万安做网站、万安网站设计、万安网站制作等企业网站建设、网页设计与制作、万安企业网站模板建站服务，十年万安做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

实现思路

• 实现组件的布局。

• 绑定监听事件和销毁监听事件

• 高度判断和图标的显示与隐藏

实现组件的布局

外层盒子（限制高度）、折叠的图标或者文字（用来显示和隐藏多余的行）、插槽（挖个坑给搜索行占位）。

事件绑定与事件销毁

需要绑定一个resize事件。resize事件是在窗口大小发生变化时就会触发。resize事件触发我们就要重新计算盒子查询项的高度，判断是否需要折叠或者显示。mounted生命周期触发计算组件实例高度。并计算查询项高度。resize事件要在组件销毁前的生命周期中进行销毁。不影响其他组件。

高度判断和图标的显示与隐藏

首先图标盒子绑定状态，用来显示和隐藏。 其次外层盒子需要设置一个高度临界点，即多大高度时不折叠，超过了这个高度就折叠。盒子高度需要你计算，比如，你需要4行不折叠，需要算出四行的高度并加上图标的高度。如果大于高度则显示图标、如果小于隐藏图标。

完整代码

布局

css代码

.fold_box {
  width: 100%;
  .fold_box_over {
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease;
  }
  .fold_box_over_max {
    height: 159px !important;
  }
  .fold_box_main {
    width: 100%;
  }
  .fold_box_over_show {
    height: 15px;
    position: absolute;
    width: 100%;
    background-color: #fff;
    bottom: 0;
    left: 0;
  }
  .fold_box_over_btn {
    width: 20px;
    height: 15px;
    cursor: pointer;
    text-align: center;
    line-height: 15px;
    margin: 0 auto;
    el-icon svg{
      font-weight: bold;
      transition: all 0.4s ease;
    }
    &:hover {
      color: #00caab;
    }
  }
  .fold_box_over_btn_rotate svg{
    transform: rotate(180deg);
  }
}

script

组件使用

.item {
  height: 30px;
  margin: 6px;
  background-color: skyblue;
}

关于“vue3怎么实现搜索项超过n行就折叠”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue3怎么实现搜索项超过n行就折叠”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。