vue.js2 指令_用于砌块布局的Vue.js指令

vue.js2 指令

砌体 (vue-masonry)

Vue.js directive for masonry blocks layouting. Original masonry library.

用于砌块布局的Vue.js指令。 原始砌体库。

安装与使用 (Install & Usage)

Get from npm: npm install vue-masonry --save

从npm获取：npm install vue-masonry --save

or from bower bower install vue-masonry

或从凉亭凉亭安装vue-masonry

Make sure that the masonry library is included; for example using cdn link: <script async defer src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script> or in other convenient way.

Use in component code

在组件代码中使用

import Vue from 'vue'
import {VueMasonryPlugin} from 'vue-masonry';

Vue.use(VueMasonryPlugin)

<div v-masonry transition-duration="0.3s" item-selector=".item">
    <div v-masonry-tile class="item" v-for="(item, index) in blocks">
       <!-- block item markup -->
    </div>
</div>

现场演示 (Live Demo)

https://shershen08.github.io/vue-plugins-demo-static/index.html#/masonry

https://shershen08.github.io/vue-plugins-demo-static/index.html#/石工

翻译自: https://vuejsexamples.com/vue-js-directive-for-masonry-blocks-layouting/

vue.js2 指令