So falten Sie Suchelemente in vue3, wenn sie n Zeilen überschreiten

Implementierungsideen

• Implementieren Sie das Layout von Komponenten.

• Hörereignisse binden und Hörereignisse zerstören

• Höhenbeurteilung und Anzeige und Ausblenden von Symbolen

Komponentenlayout implementieren

Äußeres Feld (beschränkte Höhe), gefaltetes Symbol oder Text (wird zum Ein- und Ausblenden von Redundanz verwendet). Reihen), Schlitze (ein Loch graben, um die Suchreihe zu belegen).

Ereignisbindung und Ereigniszerstörung

Sie müssen ein Größenänderungsereignis binden. Das Resize-Ereignis wird ausgelöst, wenn sich die Fenstergröße ändert. Wenn das Größenänderungsereignis ausgelöst wird, müssen wir die Höhe des Box-Abfrageelements neu berechnen, um zu bestimmen, ob es gefaltet oder angezeigt werden muss. Der montierte Lebenszyklus löst die Berechnung der Komponenteninstanzhöhe aus. Und berechnen Sie die Höhe des Abfrageelements. Das Größenänderungsereignis muss im Lebenszyklus zerstört werden, bevor die Komponente zerstört wird. Hat keinen Einfluss auf andere Komponenten.

Höhenbeurteilung und Anzeige und Ausblenden von Symbolen

Zunächst wird der Bindungsstatus der Symbolbox zum Ein- und Ausblenden verwendet. Zweitens muss der äußere Karton einen höhenkritischen Punkt festlegen, d. h. die Höhe, bei der er sich nicht falten lässt, und wenn er diese Höhe überschreitet, wird er gefaltet. Sie müssen die Höhe der Box berechnen. Wenn Sie beispielsweise 4 Reihen ohne Faltung benötigen, müssen Sie die Höhe der vier Reihen berechnen und die Höhe des Symbols hinzufügen. Ist er größer als die Höhe, wird das Icon angezeigt, ist er kleiner als die Höhe, wird das Icon ausgeblendet.

Vollständiger Code

Layout

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

CSS-Code

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

Skript

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

Komponentenverwendung

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

Das obige ist der detaillierte Inhalt vonSo falten Sie Suchelemente in vue3, wenn sie n Zeilen überschreiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!