基于vue的插槽式动态布局组件slot-layout

因为经常需要做一些动态布局，做了个vue动态布局组件slot-layout，分享下。

• 组件地址：
  https://github.com/hzsrc/slot...
• 安装方式：
  npm i slot-layout

这个组件基于一个布局配置对象，通过调整布局配置对象，最终通过映射到对应的vue组件插槽，来动态进行页面布局，布局和配置比较方便。

特性

• 通过js布局对象，完全控制页面布局。
• 特别适合用于低代码平台系统，只需在运行时按照需要动态传入一个布局配置对象，即可随意调整页面布局。无需预先编写布局代码。
• 支持多层布局嵌套，可实现任意数目、任意层次的布局。
• 支持任意长度单位，如px、vw、%、rem。
• 支持填充式布局。即区块填充满父容器。
• 组件自带布局配置功能，可轻松实现布局设计。
  

用法举例如下：

1、简单例子（单层、两个子节点）：
查看效果：https://codepen.io/hzsrc/pen/...

<template>
  <slot-layout class="full" :layout="layout">
    <div slot="left" class="blk f-center">
      left
    </div>
    <div slot="right" class="blk f-center">
      <button @click="layout.isVertical=!layout.isVertical">动态调整布局</button>
    </div>
  </slot-layout>
</template>
<script>
import slotLayout from "https://cdn.skypack.dev/slot-layout@1.0.4";
export default {
  components:{
    slotLayout
  },
  data(){
    return {
      //布局配置对象
      layout: {
        aySize: '100%',
        isVertical: false,
        children: [
            {slot: 'left', laySize: '60px'},
            {slot: 'right', laySize: 'fill'}
        ]
      }
    }
  }
};
</script>

2、复杂的例子：
查看效果

<template>
    <div class="full">
        <layout-designer v-if="isDesign" class="full" :layout="layout" show-result></layout-designer>
        <slot-layout v-else class="full pd-10" :layout="layout" gulp="5px">
            <aside slot="tree" class="full f-center">aside</aside>
            <header slot="top" class="full f-center">header</header>
            <nav slot="title" class="full f-center">
                <button @click="resetLayout">动态调整布局</button>
            </nav>
            <div slot="right" class="full f-center">right</div>
            <div slot="bottom" class="full f-center">bottom</div>
        </slot-layout>
        <a class="absolute" @click="isDesign=!isDesign">{{isDesign ? '运行布局' : '设计布局'}}</a>
    </div>
</template>

<script>
    import slotLayout from 'slot-Layout'
    import LayoutDesigner from 'slot-Layout/src/design/layoutDesigner';

    export default {
        name: 'slotLay',
        data() {
            return {
                isDesign: true,
                layout: {
                    isVertical: false,
                    laySize: '100%',
                    children: [
                        {
                            laySize: '15vw',
                            slot: 'tree',
                        },
                        {
                            laySize: 'fill',
                            isVertical: true,
                            children: [
                                {
                                    slot: 'title',
                                    laySize: '60px'
                                },
                                {
                                    slot: 'top',
                                    laySize: '30%',
                                },
                                {
                                    slot: 'bottom',
                                    laySize: 'fill',
                                }
                            ]
                        },
                        {
                            laySize: '100px',
                            slot: 'right',
                        },
                    ]
                }
            }
        },
        methods: {
            resetLayout() {
                this.layout.children.reverse()
            }
        },
        components: {
            LayoutDesigner,
            slotLayout
        }
    }
</script>