vue-waterfall | 一款基于vuejs的瀑布流布局组件


源码介绍

简要教程

vue waterfall是一款基于vuejs的瀑布流布局组件。它可以设置为垂直瀑布流布局和水平瀑布流布局。使用简单,可以快速集成到您的应用之中。

使用方法

安装

如果您想使用vue waterfall瀑布流布局组件,首先您需要安装它,命令如下:

npm install --save vue-waterfall
		
使用

在ES6中使用:

/* in xxx.vue */

import Waterfall from 'vue-waterfall/lib/waterfall'
import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'

/*
 * or use ES5 code (vue-waterfall.min.js) :
 * import { Waterfall, WaterfallSlot } from 'vue-waterfall'
 */

export default {
  ...
  components: {
    Waterfall,
    WaterfallSlot
  },
  ...
}
		

在ES5中使用:

var Vue = require('vue')
var Waterfall = require('vue-waterfall')

var YourComponent = Vue.extend({
  ...
  components: {
    'waterfall': Waterfall.waterfall,
    'waterfall-slot': Waterfall.waterfallSlot
  },
  ...
})
		

浏览器中使用:

<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-waterfall/vue-waterfall.min.js"></script>

new Vue({
  ...
  components: {
    'waterfall': Waterfall.waterfall,
    'waterfall-slot': Waterfall.waterfallSlot
  },
  ...
})
		

HTML结构

<waterfall :line-gap="200" :watch="items">
  <!-- each component is wrapped by a waterfall slot -->
  <waterfall-slot
    v-for="(item, index) in items"
    :width="item.width"
    :height="item.height"
    :order="index"
    :key="item.id"
  >
    <!--
      your component
    -->
  </waterfall-slot>
</waterfall>			
		
配置参数
  • line: 线条的方向,可以是水平(h)或垂直(v)。
  • line-gap: 线条之间的标准空间(以像素为单位)。
  • min-line-gap: 线条之间的最小间隔,与line-gap相等。
  • max-line-gap: 线条之间的最大间隔,与line-gap相等。
  • single-max-width: 单个插槽在水平方向上的最大宽度。
  • fixed-height: 当line=h时,是否固定插槽的高度。
  • grow: 数组中每个插槽在水平方向上的伸缩因子,当line=h时忽略*-gap。
  • align: 对齐方式,可以是左对齐(left)、右对齐(right)或居中对齐(center)。
  • auto-resize: 是否在窗口大小更改时重新调整布局。
  • interval: 重新调整布局的最小时间间隔(以毫秒为单位)。
  • watch: 监视某些内容,当其发生变化时重新调整布局。

插槽

  • width: 插槽的宽度。
  • height: 插槽的高度。
  • order: 插槽的顺序,通常设置为v-for中的索引。
  • key: 插槽的唯一标识符,用于过渡效果。
  • move-class: 用于过渡效果的类,参见vue-animated-list

github网址:https://github.com/MopTym/vue-waterfall



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部