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

4 years ago

source link: https://segmentfault.com/a/1190000040633521
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

因为经常需要做一些动态布局，做了个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/[email protected]";
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>

Recommend

www.w3cplus.com 7 years ago
Cache

CSS布局指南_CSS, Layout, 布局教程_w3cplus

在过去几年中，CSS布局已经发生了巨大的变化，现在我们开发网站的方式也发生了巨大变化。现在我们有需要可选的CSS布局方式来开发我们的网站，这也就要求我们对这些方式能作出正确而双合适的选择。在这篇文章中，将会介绍各种CSS布局的基本使用方式以及使用的目的。...

www.tuicool.com 6 years ago
Cache

Slot-based UI development in Swift

One of the most challenging decisions that all programmers have to make on an ongoing basis is when to generalize a solution versus just keeping it tied to a specific use case. It’s equally easy — and potentially damaging...