vue3如何实现搜索项超过n行就折叠

vue3如何实现搜索项超过n行就折叠

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

实现思路

• 实现组件的布局。

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

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

实现组件的布局

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

事件绑定与事件销毁

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

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

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

完整代码

布局

<template>    <div class="fold_box">      <div        class="fold_box_over"        :        :class="{'fold_box_over_max': isOver}"      >        <div          ref="foldBoxMain"          class="fold_box_main"        >          <slot></slot>        </div>        <div          v-show="isOverChange"          class="fold_box_over_show"        >          <div            class="fold_box_over_btn"            @click="showOver"          >          <el-icon :class="{'fold_box_over_btn_rotate': !isOver}" :size="14">              <ArrowDown />          </el-icon>            </div>        </div>      </div>    </div>  </template>

css代码

<style lang="less" scoped>  .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);    }  }  </style>

script

<script>  import { reactive, toRefs, ref,onMounted,onBeforeUnmount,getCurrentInstance } from "vue";  export default {    setup() {      const state = reactive({        boxWidth: 0,        mainHeight: 0,        isOver: false,        isOverChange: false      });      const { ctx } = getCurrentInstance()      const changeSize = () => {        let el = ctx.$el        state.boxWidth = el.offsetWidth        countMainHeight()      }      window.addEventListener('resize', changeSize)      const countMainHeight = () => {        if (ctx.$refs['foldBoxMain']) {          let el= ctx.$refs['foldBoxMain']          state.mainHeight = el.offsetHeight + 15          if (state.mainHeight > 129) {              state.isOverChange = true              state.isOver = true            } else {              state.isOverChange = false              state.isOver = false            }          }      }      onMounted(() => {        changeSize()      })      onBeforeUnmount(()=> {        window.removeEventListener('resize', changeSize)      })      const showOver = () => {         state.isOver = !state.isOver      }      return {        ...toRefs(state),        changeSize,        countMainHeight,        showOver      };    },  };  </script>

组件使用

<template>    <FoldBox ref="foldBox">      <div class="item" v-for="(item,index) in boxList" :key="index">{{item}}</div>    </FoldBox>  </template>  <script>  import { reactive, toRefs, ref } from "vue";  import FoldBox from './FoldBox.vue'  export default {    components:{      FoldBox    },    setup() {      const state = reactive({        boxList: [1,2,3,4,5]      });      return {        ...toRefs(state),      };    },  };  </script>  <style scoped>  .item {    height: 30px;    margin: 6px;    background-color: skyblue;  }  </style>

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

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[