Slot-type dynamic layout component based on vue slot-layout

Because we often need to do some dynamic layout, I made a vue dynamic layout component slot-layout , share it.

• Component address:
  https://github.com/hzsrc/slot-layout
• Installation method:
  npm i slot-layout

This component is based on a layout configuration object. By adjusting the layout configuration object, and finally mapping to the corresponding vue component slot, the page layout can be dynamically performed. The layout and configuration are more convenient.

characteristic

• Through the js layout object, fully control the page layout.
• It is especially suitable for low-code platform systems. You only need to dynamically pass in a layout configuration object as needed at runtime, and you can adjust the page layout at will. No need to write layout code in advance.
• Support multi-layer layout nesting, which can realize any number and any level of layout.
• Support arbitrary length units, such as px, vw, %, rem.
• Support filling layout. That is, the block fills the parent container.
• The component has its own layout configuration function, which can easily realize the layout design.
  

Examples of usage are as follows:

1. Simple example (single layer, two child nodes):
Check the effect: https://codepen.io/hzsrc/pen/oNwzdOw

<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. Complex example:
view effect

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