1.0.0 • Published 5 years ago

vue-waterfall-unit v1.0.0

Weekly downloads
2
License
ISC
Repository
github
Last release
5 years ago

vue-waterfall-unit

基于vue的瀑布流组件( pc端、手机端 )

Example

在线示例

npm引入

  npm i vue-waterfall-unit -S
  import vueWaterfallUnit from 'vue-waterfall-unit'

使用示例

  <vue-waterfall-unit
    :list="list"
    :spacing="10"
    :column="8"
    :load-change="loadChange"
    containerType="parent"
  >
    <template v-slot:item="water">
      <div class="image-item">
        <img :src="water.data.src" alt="" width="100%" @load="loadChange = !loadChange"/>
        <div style="padding: 5px 10px; font-size: 14px; text-align: center;">{{water.data.name}}</div>
      </div>
    </template>
  </vue-waterfall-unit>

参数

参数参数说明参数类型可选值
list内容数组Array
spacing列间距和行间距Number大于0的数字
column列数Number大于0的数字
containerType父盒子类型String{parent: '父盒子', other: '可视区域宽度'}
loadChange加载完改变触发刷新(图片等加载完成等)Booleanfalse/true