Bagaimana untuk mencapai lipatan item carian jika ia melebihi n baris dalam vue3-View.js-php.cn

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

WBOY

Lepaskan： 2023-05-13 19:22:04

ke hadapan

1601 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!