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>
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 中国語 Web サイトの他の関連記事を参照してください。