img-layout

一个基于Vue.js的高度灵活的自定义图片排列组件，基于flex布局

安装

Using npm

npm i -S img-layout

全局组件：

import img-layout from 'img-layout';
Vue.use(img-layout)

局部组件：

import imgLayout from 'img-layout';
export default {
  components: { imgLayout },
}

使用示例：

<template>
  <img-layout :options="layoutOptions" :border="true">
      <template slot="box-1">
        <div>区域一</div>
      </template>
      <template slot="box-2">
        <div>区域二</div>
      </template>
      <template slot="box-3">
        <div>区域三</div>
      </template>
      <template slot="box-4">
        <div>区域四</div>
      </template>
      <template slot="box-5">
        <div>区域五</div>
      </template>
    </img-layout>
</template>
import imgLayout from 'img-layout';
export default {
  components: { imgLayout },
  data() {
    return {
      layoutOptions: {
        direction: 'row',
        height: '200px',
        children: [
          {
            width: '50%',
            slot: 'box-1'
          },
          {
            direction: 'column',
            width: '50%',
            children: [
              {
                width: '100%',
                height: '50%',
                slot: 'box-2'
              },
              {
                direction: 'row',
                height: '50%',
                children: [
                  {
                    direction: 'column',
                    width: '50%',
                    height: '100%',
                    children: [
                      {
                        width: '100%',
                        height: '50%',
                        slot: 'box-3'
                      },
                      {
                        width: '100%',
                        height: '50%',
                        slot: 'box-4'
                      }
                    ]
                  },
                  {
                    width: '50%',
                    height: '100%',
                    slot: 'box-5'
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  }
}

注意：

当layoutOptions对象中出现direction字段时，表示为一个容器，不能写入具体的内容，只能用来作为存放其children属性中的父元素。

direction 为 flex-direction 支持的所有值。

效果展示：