Vue自动响应网格布局库 - autoresponsive-vue

Vue自动响应网格布局库 - autoresponsive-vue
插件名称 autoresponsive-vue
发布时间 2020年12月2日

vue.js应用程序的神奇响应式网格布局。

安装和下载:

$ npm i autoresponsive-vue --save-dev

用法:

导入自动响应。

import AutoResponsive from 'autoresponsive-vue';
Vue.use(AutoResponsive);

基本示例

<template>
  ...
  <auto-responsive
    v-bind="options"
  >
    <div v-for="item in data" :style="style" class="item">{{ item }}</div>
  </auto-responsive>
  ...
</template>
<script>
  ...
  data() {
    return {
      data: [],
      options: {
        ...
      }
    }
  }
  ...
</script>

默认 props

props: {
  containerWidth: {
    type: Number,
    default: null
  },
  containerHeight: {
    type: Number,
    default: null
  },
  gridWidth: {
    type: Number,
    default: 10
  },
  prefixClassName: {
    type: String,
    default: pkg.name
  },
  itemClassName: {
    type: String,
    default: 'item'
  },
  itemMargin: {
    type: Number,
    default: 0
  },
  horizontalDirection: {
    type: String,
    default: 'left'
  },
  transitionDuration: {
    type: [String, Number],
    default: 1
  },
  transitionTimingFunction: {
    type: String,
    default: 'linear'
  },
  verticalDirection: {
    type: String,
    default: 'top'
  },
  closeAnimation: {
    type: Boolean,
    default: false
  },
  onItemDidLayout: {
    type: Function,
    default: () => {}
  },
  onContainerDidLayout: {
    type: Function,
    default: () => {}
  }
},