Vue 2とVue 3のための組積レイアウト

14800 ワード

webdev vue layout masonry テキストリンク

導入

私のVUE 2プロジェクトのかなりの数で、私は図書館を使っていますvue-masonry-wall .
使いやすさとSSRのサポートは、このライブラリを使用する私の決定の重要な要因でした.
しかし、私は現在Nuxt 3のリリースのための私のプロジェクトを準備して、Vue 3に付随する移行の進行中です.
Vue 3に匹敵する石積みレイアウトを見つけることができなかったのでFuxing Loh's vue-masonry-wall .
結果は@yeger/vue-masonry-wall , タイプスクリプトとVue 3のオリジナルライブラリの書き直し.
それは依存関係を持ちません.そして、最大54 %の束サイズ減少に終わります.
私も作成@yeger/vue2-masonry-wall Vue 2プロジェクトで使用するために.
それも、任意の依存関係をドロップし、最大40 %の束サイズの減少を達成
また、複数の問題が修正されている.
特に、間隔gap ) 現在、列のカウントを計算しながら、要素の除去がサポートされていると見なされます.

インストール

Vue 2

# yarn
$ yarn add @yeger/vue2-masonry-wall

# npm
$ npm install @yeger/vue2-masonry-wall

まず、他のプラグインのようなコンポーネントをインストールする必要があります.
相談するVue 2 documentation プラグインのインストールの詳細については.

import Vue from 'vue'
import MasonryWall from '@yeger/vue2-masonry-wall'

Vue.use(MasonryWall)

Vue 3

# yarn
$ yarn add @yeger/vue-masonry-wall

# npm
$ npm install @yeger/vue-masonry-wall

まず、他のプラグインのようなコンポーネントをインストールする必要があります.
相談するVue 3 documentation プラグインのインストールの詳細については.

import { createApp } from 'vue'
import MasonryWall from '@yeger/vue-masonry-wall'

const app = createApp()

app.use(MasonryWall)

用途

コンポーネントはmasonry-wall or MasonryWall .
必要なプロップはitems , 型の配列any .
の各要素items がデフォルトのスロットに渡される.
支柱column-width を取り込むnumber , 対象の列幅を指定します.
これは、カラム数を計算するために使用されますが、列の実際の幅を定義していません.
同様にgap ピクセル内の項目間のギャップを定義し、カラムカウントを計算しながら尊重します.
最後に、支柱ssr-columns サーバ側のレンダリングコンテキストの列数を指定するために使用できます.
成分のすべての支柱が反応性である間、突然変異items 配列はレイアウトを更新しません.
更新を強制するには、新しい配列をitems プロップ
コンポーネントの基本的な使用方法を次の例に示します.
インタラクティブデモンストレーションのためにvue-masonry-wall.yeger.eu or vue2-masonry-wall.yeger.eu .

<template>
  <MasonryWall :items="items" :ssr-columns="1" :column-width="300" :gap="16">
    <template #default="{ item }">
      <div :style="{ height: `${item.height}px` }">
        {{ item.content }}
      </pre>
    </template>
  </MasonryWall>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { content: 'First', height: 150 },
        { content: 'Second', height: 300 },
        { content: 'Third', height: 150 },
        { content: 'Fourth', height: 450 },
      ]
    }
  }
}
</script>