具有 SSR 支持的砌体布局 – vue-masonry-wall

具有 SSR 支持的砌体布局 – vue-masonry-wall
插件名称 vue-masonry-wall
发布时间 2021年8月27日
插件作者 DerYeger

Masonry Wall 是一个 Vue 3 组件,用于渲染响应式、砌体风格的网格布局,并支持 SSR 和 RTL 布局。

安装和下载:

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

# NPM
$ npm i @yeger/vue-masonry-wall --save

如何使用它:

1. 导入并注册组件。

import { createApp } from 'vue'
import MasonryWall from '@yeger/vue-masonry-wall'
const app = createApp()
app.use(MasonryWall)

2. 这个例子展示了如何在你的应用中渲染一个基本的砌体布局。

<template>
  <masonry-wall :items="items" :ssr-columns="1" :column-width="300" :padding="16">
    <template #default="{ item, index }">
      <div style="height: 150px">
        <h1>{{ item.title }}</h1>
        <span>{{ item.description }}</span>
      </div>
    </template>
  </masonry-wall>
</template>
export default {
  data() {
    return {
      items: [
        { title: 'First', description: 'The first item.' },
        { title: 'Second', description: 'The second item.'},
        { title: 'Third', description: 'The third item.'},
        // more items here
      ]
    }
  }
}

3.组件props。

items: {
  type: Array as PropType<unknown[]>,
  required: true,
},
ssrColumns: {
  type: Number as PropType<number | undefined>,
  default: undefined,
},
columnWidth: {
  type: Number,
  default: 400,
},
padding: {
  type: Number,
  default: 0,
},
rtl: {
  type: Boolean,
  default: false,
},