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说明描述错误。