Comment réaliser le pliage des éléments de recherche s'ils dépassent n lignes dans vue3

Idées d'implémentation

• implémentez la disposition des composants.

• Lier les événements d'écoute et détruire les événements d'écoute

• Jugement de la hauteur et affichage et masquage des icônes

Implémenter la disposition des composants

Boîte extérieure (hauteur restreinte), icône pliée ou texte (utilisé pour afficher et masquer les éléments redondants rangées), des emplacements (creuser un trou pour occuper la rangée de recherche).

Liaison d'événement et destruction d'événement

Vous devez lier un événement de redimensionnement. L'événement resize est déclenché lorsque la taille de la fenêtre change. Lorsque l'événement de redimensionnement est déclenché, nous devons recalculer la hauteur de l'élément de requête boîte pour déterminer s'il doit être plié ou affiché. Le cycle de vie monté déclenche le calcul de la hauteur de l'instance de composant. Et calculez la hauteur de l’élément de requête. L'événement de redimensionnement doit être détruit au cours du cycle de vie avant la destruction du composant. N'affecte pas les autres composants.

Jugement de la hauteur et affichage et masquage des icônes

Tout d'abord, l'état de liaison de la boîte d'icônes est utilisé pour afficher et masquer. Deuxièmement, la boîte extérieure doit définir un point critique en hauteur, c'est-à-dire la hauteur à laquelle elle ne se pliera pas, et si elle dépasse cette hauteur, elle se pliera. Vous devez calculer la hauteur de la boîte. Par exemple, si vous avez besoin de 4 lignes sans pliage, vous devez calculer la hauteur des quatre lignes et ajouter la hauteur de l'icône. Si elle est supérieure à la hauteur, l'icône est affichée, si elle est inférieure à la hauteur, l'icône est masquée.

Code complet

Mise en page

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

code 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(&#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>

Utilisation des composants

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!