关于javascript:基于vue的插槽式动态布局组件slotlayout

因为常常须要做一些动静布局，做了个 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>