Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including m_vue_waterfall with all npm packages installed. Try it out:

var mVueWaterfall = require("m_vue_waterfall")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

m_vue_waterfall v0.0.7

vue waterfall

###使用方式

  1. 安装
npm install --save m_vue_waterfall
  1. 使用
import waterfall from 'm_vue_waterfall'
Vue.use(waterfall)
<waterfall :data="lists" :gap="10" :col={2}>
       <template v-slot="{item}">
           <div class="item">
               <div class="tit">{{item.name}}</div>
               <div class="con">{{item.con}}</div>
           </div>
       </template>
   </waterfall>
  1. 属性说明
  • data:表示传入的列表数据json格式。
  • gap:表示瀑布流两列的间隔宽度,传入number类型
  • col: 表示多少列
  • template标签表示自定义单个的子项的模板,v-slot来接受单个子项的数据。

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free