vue直接操作dom元素_纯vue响应式砌体布局，无需直接进行dom操作

vue直接操作dom元素

砌石墙 (vue-masonry-wall)

A pure vue responsive masonry implementation without direct dom manipulation, ssr friendly with lazy appending. I created this because other libraries has no SSR support, and I needed a pure vue implementation.

纯粹的vue响应式砌体实现，无需直接进行dom操作，对ssr友好，并具有延迟附加功能。 我之所以创建它，是因为其他库不支持SSR，并且我需要一个纯粹的vue实现。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

npm i vue-masonry-wall
# or yarn
yarn add vue-masonry-wall

特征 (Features)

• No Direct DOM Manipulation

  没有直接的DOM操作

• SSR friendly, able to load and re hydrate later

  SSR友好，能够在以后加载和补水

• 1 dependency only, no legacy dependencies

  仅1个依赖项，没有旧的依赖项

• Auto lazy appending, scroll to auto load more

  自动延迟附加，滚动以自动加载更多

• Auto item placement, will find best column

  自动放置物品，将找到最佳列

• Responsive design

  响应式设计

用法 (Usage)

<vue-masonry-wall :items="items" :options="options" @append="append"/>

const items = []
const options = {
  width: 300,
  padding: {
    default: 12,
    1: 6,
    2: 8
  }
}

const append = () => {
  // API call and add items
  this.items.push(...[])
}

基本的 (Basic)

<template>
  <div id="app">
    <h2>Masonry: append endlessly</h2>

    <vue-masonry-wall :items="items" :options="{width: 300, padding: 12}" @append="append">
      <template v-slot:default="{item}">
        <div class="item">
          <h5>{{item.title}}</h5>
          <p>{{item.content}}</p>
        </div>
      </template>
    </vue-masonry-wall>
  </div>
</template>

<script>
  import VueMasonryWall from "vue-masonry-wall";

  export default {
    name: 'app',
    components: {VueMasonryWall},
    data() {
      return {
        items: [
          {title: 'Item 0', content: 'Content'},
          {title: 'Item 1', content: 'Content'},
        ]
      }
    },
    methods: {
      /**
       * I am mocking a API call that load 20 objects at a time.
       */
      append() {
        for (let i = 0; i < 20; i++) {
          this.items.push({title: `Item ${this.items.length}`, content: 'Content'})
        }
      }
    }
  }
</script>

Nuxt SSR (Nuxt SSR)

Add :ssr="{columns: 2}" to masonry so that during SSR, it will be load in 2 columns.

将:ssr="{columns: 2}"到砌体中，以便在SSR期间将其加载到2列中。

SSR has no clue what is the size of your height of your element or width of the browser. You can however guess based on user-agent: https://github.com/nuxt-community/device-module This param allow you to preload a config for SSR rendering, it will distribute your items into all columns evenly.

SSR不知道元素高度的大小或浏览器的宽度是多少。 但是，您可以根据用户代理进行猜测： https : //github.com/nuxt-community/device-module该参数允许您预加载用于SSR呈现的配置，它将把您的项目均匀地分配到所有列中。

<vue-masonry-wall :items="items" :options="{width: 300, padding: 12}" :ssr="{columns: 2}" @append="append">
  <template v-slot:default="{item}">
    <div class="item">
      <h5>{{item.title}}</h5>
      <p>{{item.content}}</p>
    </div>
  </template>
</vue-masonry-wall>

翻译自: https://vuejsexamples.com/a-pure-vue-responsive-masonry-layout-without-direct-dom-manipulation/

vue直接操作dom元素