快捷導(dǎo)航

vue3實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊的思路詳解

更新時(shí)間：2022年06月09日 14:18:33 作者：Ayanokouji

我們在做列表查詢的時(shí)候，會(huì)有很多查詢項(xiàng)，如何實(shí)現(xiàn)超過n行查詢項(xiàng)的時(shí)候自動(dòng)折疊起來呢？本文給大家分享vue3實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊的思路詳解，感興趣的朋友一起看看吧

實(shí)現(xiàn)效果

實(shí)現(xiàn)思路

實(shí)現(xiàn)組件的布局。
綁定監(jiān)聽事件和銷毀監(jiān)聽事件
高度判斷和圖標(biāo)的顯示與隱藏

實(shí)現(xiàn)組件的布局

外層盒子（限制高度）、折疊的圖標(biāo)或者文字（用來顯示和隱藏多余的行）、插槽（挖個(gè)坑給搜索行占位）。

事件綁定與事件銷毀

需要綁定一個(gè)resize事件。resize事件是在窗口大小發(fā)生變化時(shí)就會(huì)觸發(fā)。resize事件觸發(fā)我們就要重新計(jì)算盒子查詢項(xiàng)的高度，判斷是否需要折疊或者顯示。mounted生命周期觸發(fā)計(jì)算組件實(shí)例高度。并計(jì)算查詢項(xiàng)高度。resize事件要在組件銷毀前的生命周期中進(jìn)行銷毀。不影響其他組件。

高度判斷和圖標(biāo)的顯示與隱藏

首先圖標(biāo)盒子綁定狀態(tài)，用來顯示和隱藏。其次外層盒子需要設(shè)置一個(gè)高度臨界點(diǎn)，即多大高度時(shí)不折疊，超過了這個(gè)高度就折疊。盒子高度需要你計(jì)算，比如，你需要4行不折疊，需要算出四行的高度并加上圖標(biāo)的高度。如果大于高度則顯示圖標(biāo)、如果小于隱藏圖標(biāo)。

完整代碼

布局

<template>
  <div class="fold_box">
    <div
      class="fold_box_over"
      :style="{height: mainHeight > 0 ? mainHeight + 'px' : ''}"
      :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>