关于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>