修改vue.js 端口_Vue.js 2的Magic Grid小端口

修改vue.js 端口

Vue魔术网格 (Vue-Magic-Grid)

This is a Vue.js port of @e-oj 's Magic Grid. Please check the /test folder for a example.

这是@ e-oj的Magic Grid的Vue.js端口。 请检查/ test文件夹作为示例。

Make sure to lazy-load images with a set height of the image-div, or use waitForImages() or something similar to make sure the grid is properly calculated.

确保以image-div的设置高度延迟加载图像，或者使用waitForImages()或类似方法来确保正确计算了网格。

建立 (Setup)

Install & Register the component

安装并注册组件

$ npm i -S vue-magic-grid

import MagicGrid from 'vue-magic-grid'

Vue.use(MagicGrid)

用 (Use)

<magic-grid>
  <card
    v-for="(post, i) in posts"
    :key="i"
    :title="post.title"
    :body="post.body" />
</magic-grid>

道具 (Props)

• wrapper: 'wrapper' // Wrapper class/id

  wrapper: 'wrapper' //包装器类/ id

• gap: 32 // Gap between elements

  gap: 32 //元素之间的差距

• maxCols: 5 // Maximum number of colums. Default: Infinite

  maxCols: 5 //最大列数。 默认值：无限

• maxColWidth: 280 // Maximum width of child elements

  maxColWidth: 280 //子元素的最大宽度

• animate: false // Animate item positioning.

  animate: false //为项目定位动画。

翻译自: https://vuejsexamples.com/a-tiny-port-of-magic-grid-for-vue-js-2/

修改vue.js 端口