zj-layout组件的布局

一、安装zj-layout

npm i zj-layout

二、引入

 components:{ZjLayout: () => import('zj-layout')},

三、使用（小程序）

<template><view class="home-page"><!-- config：配置  debug：开启调试模式  --><zj-layout class="home-layout" :config="homeConfig" debug><!-- 插槽对应配置中的插槽 --><template v-slot:top><com-top-bar/></template><template v-slot:body><com-body/></template></zj-layout><!-- <home-wrapper></home-wrapper> --></view>
</template><script>
export default {components:{ZjLayout: () => import('zj-layout'),ComTopBar: () => import('@/pages/home/com-top-bar.vue'),ComBody: () => import('@/pages/home/com-body.vue'),},data: () => ({homeConfig:{direction: 'column',  // 上下布局children: [{slot: 'top',  // 插槽的名称class: 'top',},{slot: 'body',  // 插槽的名称direction: 'column',},]}})
}
</script>

效果：

注意：配置里面的类需要/deep/ 进去修改

zj-layout组件的布局相关推荐

android layout组件,Android UI学习 - Linear Layout, RelativeLayout
1.一些常用的公共属性介绍 1) layout_width -宽 fill_parent: 宽度和父元素相同,wrap_content: 宽度随本身的内容所调整,或者指定 px值来设置宽 2) lay ...
Bokeh中图形与组件的布局简介 | Bokeh 小册子
Bokeh 系列文章传送门: Bokeh小册子:入门 Bokeh小册子:figure详细解读 Bokeh基础可视化图形 Bokeh中独特的数据类型简介: ColumnDataSource | Boke ...
【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )
文章目录一.FractionallySizedBox 组件二.Stack 布局组件三.Positioned 组件四. 完整代码示例五. 相关资源一.FractionallySizedBox ...
HarmonyOS之深入解析自定义组件与布局的实现
一.概述 HarmonyOS 提供了一套复杂且强大的 Java UI 框架,其中 Component 提供内容显示,是界面中所有组件的基类.ComponentContainer 作为容器容纳 Comp ...
Cocos Creator Layout组件
ResizeMode为NONE的话,动态加载子物体的话,容器大小是不会改变的.除此之外,使用网格布局时,动态加载子物体,如果是要同时动态改变容器的高度(常见),那么ResizeMode需要设置为CON ...
Unity/Auto Layout -- 理解Layout Elements（布局元素）
前言在UGUI1中,Canvas下的每个GameObject都会自动添加 Rect Transform 组件来控制自身的位置和大小.通常情况下,基于Rect Transform的布局系统已经足够灵活 ...
HenCoder Android UI 部分 2-3 定制 Layout 的内部布局
这期是 HenCoder 布局部分的最后一期:重写 onMeasure() 和 onLayout() 来定制 Layout 的内部布局. 简介这期虽然距离上期的时间比较久,但主要是我的个人原因,而不 ...
【详细】Android入门到放弃篇-YES OR NO-》各种UI组件，布局管理器，单元Activity
问:达叔,你放弃了吗? 答:不,放弃是不可能的,丢了Android,你会心疼吗?如果别人把你丢掉,你是痛苦呢?还是痛苦呢?~ 引导语有人说,爱上一个人是痛苦的,有人说,喜欢一个人是幸福的. 人与人之 ...
android 分区layout以及虚拟内存布局-小结
摘要简述启动过程的内存分配,各个映像的烧写,加载,logo的刷新,文件系统mount. DRAM:外部RAM: ISRAM:内部RAM(128K),(PL会跑在ISRAM里面,去初始化DRAM,lo ...
android如何引用布局,android 动态布局与引用第三方layout中的布局
引用第三方layout中的布局LinearLayout rightContentView = (LinearLayout) findViewById(R.id.lyt_chat_content); V ...

zj-layout组件的布局

一、安装zj-layout

二、引入

三、使用（小程序）

zj-layout组件的布局相关推荐

最新文章

热门文章