Bagaimana untuk mencapai lipatan item carian jika ia melebihi n baris dalam vue3

Idea pelaksanaan

• Melaksanakan reka letak komponen.

• Ikat acara mendengar dan musnahkan acara mendengar

• Pertimbangan ketinggian dan paparan serta penyembunyian ikon

Melaksanakan susun atur komponen

Kotak luar (ketinggian had), ikon atau teks terlipat (digunakan untuk menunjukkan dan menyembunyikan baris berlebihan), slot (menggali lubang untuk menduduki baris carian).

Ikatan acara dan pemusnahan acara

Perlu mengikat acara ubah saiz. Acara ubah saiz dicetuskan apabila saiz tetingkap berubah. Apabila peristiwa ubah saiz dicetuskan, kita perlu mengira semula ketinggian item pertanyaan kotak untuk menentukan sama ada ia perlu dilipat atau dipaparkan. Kitaran hayat yang dipasang mencetuskan pengiraan ketinggian contoh komponen. Dan hitung ketinggian item pertanyaan. Acara ubah saiz mesti dimusnahkan dalam kitaran hayat sebelum komponen dimusnahkan. Tidak menjejaskan komponen lain.

Pertimbangan ketinggian dan paparan serta penyembunyian ikon

Pertama, keadaan pengikat kotak ikon digunakan untuk menunjukkan dan menyembunyikan. Kedua, kotak luar perlu menetapkan titik kritikal ketinggian, iaitu ketinggian di mana ia tidak akan dilipat, dan jika ia melebihi ketinggian ini, ia akan dilipat. Anda perlu mengira ketinggian kotak Sebagai contoh, jika anda memerlukan 4 baris tanpa lipatan, anda perlu mengira ketinggian empat baris dan menambah ketinggian ikon. Jika lebih besar daripada ketinggian, ikon dipaparkan, jika kurang daripada ketinggian, ikon disembunyikan.

Kod penuh

Reka letak

<template>
  <div class="fold_box">
    <div
      class="fold_box_over"
      :
      :class="{&#39;fold_box_over_max&#39;: 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="{&#39;fold_box_over_btn_rotate&#39;: !isOver}" :size="14">
            <ArrowDown />
        </el-icon>

        </div>
      </div>
    </div>
  </div>
</template>

kod 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>

skrip

<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(&#39;resize&#39;, changeSize)
    const countMainHeight = () => {
      if (ctx.$refs[&#39;foldBoxMain&#39;]) {
        let el= ctx.$refs[&#39;foldBoxMain&#39;]
        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(&#39;resize&#39;, changeSize)
    })
    const showOver = () => {
       state.isOver = !state.isOver
    }
    return {
      ...toRefs(state),
      changeSize,
      countMainHeight,
      showOver
    };
  },
};
</script>

Penggunaan komponen

<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 &#39;./FoldBox.vue&#39;
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>

Atas ialah kandungan terperinci Bagaimana untuk mencapai lipatan item carian jika ia melebihi n baris dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!