vue3에서 n 줄을 초과하는 경우 검색 항목을 접는 방법

구현 아이디어

• 구성 요소의 레이아웃을 구현합니다.

• 청취 이벤트 바인딩 및 청취 이벤트 파괴

• 높이 판단 및 아이콘 표시 및 숨기기

구성요소 레이아웃 구현

외부 상자(높이 제한), 접힌 아이콘 또는 텍스트(중복 표시 및 숨기기에 사용됨) 행), 슬롯(검색 행을 차지하기 위해 구멍을 파는 것).

이벤트 바인딩 및 이벤트 소멸

크기 조정 이벤트를 바인딩해야 합니다. 창 크기가 변경되면 크기 조정 이벤트가 트리거됩니다. 크기 조정 이벤트가 트리거되면 상자 쿼리 항목의 높이를 다시 계산하여 접어야 하는지 표시해야 하는지 결정해야 합니다. 마운트된 라이프 사이클은 구성요소 인스턴스 높이 계산을 시작합니다. 그리고 쿼리 항목 높이를 계산합니다. 크기 조정 이벤트는 구성 요소가 삭제되기 전에 수명 주기에서 삭제되어야 합니다. 다른 구성 요소에는 영향을 미치지 않습니다.

신장 판단과 아이콘 표시 및 숨기기

먼저 아이콘 상자는 표시 및 숨기기에 사용되는 상태에 바인딩됩니다. 둘째, 외부 상자는 높이 임계점, 즉 접히지 않는 높이를 설정해야 하며, 이 높이를 초과하면 접히게 됩니다. 예를 들어 접지 않고 4줄이 필요한 경우 4줄의 높이를 계산하고 아이콘의 높이를 더해야 합니다. 높이보다 크면 아이콘이 표시되고, 높이보다 작으면 아이콘이 숨겨집니다.

전체 코드

레이아웃

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

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

구성 요소 사용

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

위 내용은 vue3에서 n 줄을 초과하는 경우 검색 항목을 접는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!