Heim > Artikel > Web-Frontend > So falten Sie Suchelemente in vue3, wenn sie n Zeilen überschreiten
Implementieren Sie das Layout von Komponenten.
Hörereignisse binden und Hörereignisse zerstören
Höhenbeurteilung und Anzeige und Ausblenden von Symbolen
Ä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).
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.
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.
<template> <div class="fold_box"> <div class="fold_box_over" : :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>
<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> 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>
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!