刚刚发布了1000ch/vue-grd,Vue.js 组件,它提供了灵活的网格布局系统,使用简单。

怎么用?

您可以通过npm安装。

npm install --save vue-grd

导入注册为组件后,可以使用<vue-grid>和<vue-cell>。

<template>
  <vue-grid align="stretch" justify="start">
    <vue-cell width="fill">fill</vue-cell>
    <vue-cell width="3of12">3of12</vue-cell>
    <vue-cell width="3of12">3of12</vue-cell>
  </vue-grid>
</template>

<script>
import { VueGrid, VueCell } from 'vue-grd';

export default {
  components: {
    VueGrid,
    VueCell
  }
};
</script>

您还可以将它们注册为全局组件。

import Vue from 'vue';
import VueGrd from 'vue-grd';

Vue.use(VueGrd);
// or
Vue.component('vue-grid', VueGrd.VueGrid);
Vue.component('vue-cell', VueGrd.VueCell);

如果不使用npm,可以通过 jsDelivr 加载。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-grd@1.1.0/dist/vue-grd.js"></script>
<script>Vue.use(VueGrd);</script>

配置

他们有一些属性来对齐和证明设置的宽度。

<vue-grid align>

• top:将项目拉到顶部

• middle:将项目拉到中间

• 底部:将项目拉到底部

• 拉伸:拉伸项目

• 基线:将项目拉到基线

<vue-grid justify>

• start: 布局项目开始

• center:将项目布局到中心

• end: 布局项目结束

• between:在项目之间添加空格

• around:在项目周围添加空格

<vue-cell width>

• 填充:设置项目宽度向左

• 1of12:将项目宽度设置为 8.3%

• 2of12:将项目宽度设置为 16.7%

• 3of12:将项目宽度设置为 25%

• 4of12:将项目宽度设置为 33%

• 5of12:将项目宽度设置为 41.7%

• 6of12:将项目宽度设置为 50%

• 7of12:将项目宽度设置为 58.3%

• 8of12:将项目宽度设置为 66.7%

• 9of12:将项目宽度设置为 75%

• 10of12:将项目宽度设置为 83.3%

• 11of12:将项目宽度设置为 91.7%

• 12of12:将项目宽度设置为 100%

现场演示

您可以从此处尝试。