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实现。
安装 (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元素