zj-layout

Zj-Layout 生成布局

基于自主开发的布局生成组件——Жидзин（Zidjin）系列组件

安装

推荐使用npm的方式安装

npm install zj-Layout

引入

全局引入，在 main.js 中写入以下内容：

import Vue from 'vue';
import App from './App.vue';
import ZjLayout from "zj-Layout";

Vue.use(ZjLayout);
new Vue({
  el: '#app',
  render: h => h(App)
});

局部引入，在vue页面文件中写入以下内容

export default {
    components: {
        ZjLayout: () => import('zj-Layout'),
    },
};

基本用法

初始化页面布局。

<zj-Layout class="tri-layout" :config="config" debug>
	<template v-slot:hi>
		嗨，自由！
	</template>
</zj-Layout>

<script>
    export default {
        components: {
			ZjLayout: () => import('zj-Layout'),
		},
		data: () => ({
            config: {
                children: [
                    {
                        slot: 'hi',
                    },
                ]
            },
        })
    };
</script>

进阶用法

<tri-layout class="tri-layout" :debug="true" :config="layoutConfig"></tri-layout>

<script>
    export default {
		components: {
		    TriLayout: () => import('tri-layout'),
		},
		
		data: () => ({
		    layoutConfig: {
				direction: 'column', // row 水平排列 column重直排列
				styles: { },
				debug:true,
				spacing: '0px',
				slot: 's1',
				view: 'v1',
				scroll: '', // true x y
				children: [
					{
						debug:true,
						direction: 'row',
						styles: {},
						slot: 's2',
						children: [                            
							{
								debug:true,
								direction: 'column',
								class:'s3',
								styles: {},
								slot: 's3',
							},
							{
								debug:true,
								direction: 'column',
								class:'s4',
								styles: { },
								slot: 's4',
							},
							{
								debug:true,
								direction: 'column',
								styles: { },
								class:'s5',
								/* view: 'v2', */
								slot:'s5',
							},
						]
					},
					{
						debug:true,
						direction: 'row',
						styles: {},
						slot: 's6',
						children: [                            
							{
								debug:true,
								direction: 'column',
								class:'s6-1',
								styles: {},
								slot: 's6-1',
								children: [
									{
										debug:true,
										direction: 'column',
										class:'s6-1-1',
										styles: {},
										slot: 's6-1-1',
									},
									{
										debug:true,
										direction: 'column',
										class:'s6-1-2',
										styles: {},
										slot: 's6-1-2',
									},
								]
							},
							{
								debug:true,
								direction: 'column',
								class:'s6-2',
								styles: {},
								slot: 's6-2',
								
							},
							{
								debug:true,
								direction: 'column',
								class:'s6-3',
								styles: {},
								slot: 's6-3',
								children: [
									{
										debug:true,
										direction: 'column',
										class:'s6-3-1',
										styles: {},
										slot: 's6-3-1',
									},
									{
										debug:true,
										direction: 'column',
										class:'s6-3-2',
										styles: {},
										slot: 's6-3-2',
									},
								]
							},
						]
					},
					{
						debug:true,
						direction: 'row',
						styles: {},
						slot: 's7',
						children: [                            
							{
								debug:true,
								direction: 'column',
								class:'s7-1',
								styles: {},
								slot: 's7-1',
							},
							{
								debug:true,
								direction: 'column',
								class:'s7-2',
								styles: { },
								slot: 's7-2',
							},
						]
					},	
				]
		        
		    },
		}),
		}
</script>
<style>
.s3{
        width:456px ;
        height: 80px;
    }
.s4{
		width: 580px;
		
	}
.s5{
		width: 486px;
	}
.s6-1{
		width: 340px;
		height: 660px;
	 }
.s6-1-1{
		width: 330px;
		height: 320px;
	}
.s6-1-2{
		
		width: 330px;
		height: 320px;
		
	}
.s6-2{
	 	width: 840px;
	 	height: 660px;
	 }
.s6-3{
		width: 340px;
		height: 660px;
		
	}
.s6-3-1{
		width: 330px;
		height: 320px;
	}
.s6-3-2{
		
		width: 330px;
		height: 320px;
		
	}
.s7-1{
		width: 380px;
		height: 320px;
	}
.s7-2{
		
		width: 1144px;
		height: 320px;
		
	}
</style>

ZjLayout Attributes

参数	说明	类型	可选值	默认值
styles	公共样式	Object	-	-
config	配置	Object	-	-
debug	是否显示调试模式（布局边界）	Boolean	true	false

Config Attributes

参数	说明	类型	可选值	默认值
direction	方向	String	row	column
class	样式类	String	-	-
styles	样式	Object	-	-
debug	是否显示调试模式	Boolean	true	false
spacing	间距	Number	-	0
slot	插槽 (v-slot)	String	-	s1
view	路由视图 (router-view)	String	-	v1
scroll	滚动条	String	-	-
children	子模块	Array	-	-

Children of Config Attributes

参数	说明	类型	可选值	默认值
debug	是否显示调试模式	Boolean	true	false
direction	方向	String	column	row
styles	样式	Object	-	-
slot	插槽	String	-	s2
children	子模块	Array	-	-

版本说明

V1.0.0.20211130-release

第一代稳定版本，经过多次内测。下一步文档的补完，页面布局更灵活配置。

V2.0.0.20211223-release

支持Vue3的版本。

V2.0.1.20230117-release

修正了文档漏写配置中class属性的说明、view说明描述错误。