版权所有©金蝶国际软件集团有限公司始创于1993①绝密信息严禁泄露苍穹前端能力赋能于晓婧前端技术服务部2025.01①绝密信息严禁泄露20203flex布局04设计器典型案例讲解前端全局样式个性化扩展滚动条问题目录01013flex布局4①绝密信息严禁泄露flex功能简介•flex布局是做什么的？Flex布局就像是一个智能的、可调节的书架系统，让书按照一定规则排列苍穹页面是基于Flex布局方案实现的•flex布局关键概念容器(flex-container)：包含所有项目的一个父元素，例如flex容器、高级面板、字段布局面板子项(flex-item)：容器内的子元素，例如容器中的控件、容器中的容器方向(flex-direction)：子项的排列方向，水平或垂直换行(flex-wrap)：一行/列中子项太多，是否能够换行/列拉伸(flex-grow)：决定项目在有剩余空间的情况下是否放大，子项的放大比例压缩(flex-shink)：决定项目在无剩余空间的情况下是否缩小，子项的缩小比例5①绝密信息严禁泄露flex功能简介flex布局的容器存在两根轴：主轴与交叉轴布局方向：设定主轴的方向•水平布局主轴为水平方向，起点在左端•垂直布局主轴为垂直方向，起点在上端6①绝密信息严禁泄露flex容器快速布局容器控件属性12种常用的布局方案黑色箭头代表的是布局的方向，从左到右代表水平布局，由上至下代表垂直布局红线代表的是对齐的位置，靠左、居中、靠右等7①绝密信息严禁泄露flex容器高级设置水平方向对齐方式：justify-content设定项目在主轴（水平方向）上的对齐方式•flex-start：起点对齐•center：居中•flex-end：终点对齐•space-between：两端对齐，项目之间的间隔都相等•space-around：每个项目两侧的间隔相等垂直方向对齐方式：aligin-items设定项目在交叉轴（垂直方向）上的对齐方式•flex-start：起点对齐•center：居中•flex-end：终点对齐•baseline：项目的第一行文字的基线对齐•stretch：如果项目未设置高度或高度为auto，将填满整个容器的高度前提：水平布局8①绝密信息严禁泄露flex容器高级设置水平布局水平布局方式：space-between(两端对齐)水平布局水平布局方式：space-around(间隔相等)9①绝密信息严禁泄露flex容器高级设置baseline：项目的第一行文字的基线对齐10①绝密信息严禁泄露flex容器高级设置11①绝密信息严禁泄露flex容器高级设置多行多列：(flex-wrap)决定子项在该容器是否换行和水平/垂直布局配合使用优先级多行垂直/水平方向对齐方式>垂直/水平布局方式多行垂直/水平方向对齐方式选项：12①绝密信息严禁泄露flex容器高级设置效果不一致？？？13①绝密信息严禁泄露压缩扩展比率14①绝密信息严禁泄露压缩和扩展比例扩展比率：父容器空间有剩余时，定义子项占剩余空间的比率0：不扩展非0:占剩余空间的比率一种元素的空间分配容器宽度：600px子项宽度：100px剩余容器宽度：300px设置扩展比率：A（1）B（1）C（0）实际子项宽度：A（100+300/2）B（100+300/2）C（100）15①绝密信息严禁泄露压缩和扩展比例扩展比率：父容器空间有剩余时，定义子项占剩余空间的比率0：不扩展非0:占剩余空间的比率一种元素的空间分配容器宽度：600px子项宽度：100px剩余容器宽度：300px设置扩展比率：A（1）B（2）C（3）实际子项宽度：A（100+300/6）B（100+300/6*2）C（100+300/6*3）16①绝密信息严禁泄露压缩和扩展比例压缩比率：父容器空间不足时，定义子项要压缩的比例0：不压缩非0:缩小的比率一种元素的空间分配容器宽度：600px子项宽度：250px超出容器宽度：150px设置压缩比率：A（1）B（1）C（0）实际子项宽度：A（250-150/2）B（250-150/2）C（250）flex-basis17①绝密信息严禁泄露压缩和扩展比例压缩比率：父容器空间不足时，定义子项要压缩的比例0：不压缩非0:缩小的比率一种元素的空间分配容器宽度：600px子项宽度：250px超出容器宽度：150px设置压缩比率：A（1）B（2）C（3）实际子项宽度：A（250-150/6）B（250-150/6*2）C（250-150/6*3）flex-basis18①绝密信息严禁泄露flex布局总结1.容器、子项、方向、换行、压缩、扩展2.如果容器内只有一个容器，可以直接设置扩展比率为13.设置了固定宽度不生效，检查扩展比率和压缩比率4.flex练习：https://flexboxfroggy.com/#zh-cn0219设计器典型页面案例20①绝密信息严禁泄露苍穹前后端指令式交互设计器典型案例-1圣杯布局头部和尾部：高固定、宽占满屏幕中间：三栏布局，比头尾高度要高两侧宽度不变中间自动充满区域21①绝密信息严禁泄露苍穹前后端指令式交互设计器典型案例-2flexAflexDCBflex垂直布局、水平充满水平布局、D固定宽度flex自适应，扩展、压缩为1垂直布局、水平充满模板预览式表单22①绝密信息严禁泄露设计器典型案例-3双列23①绝密信息严禁泄露苍穹前后端指令式交互前后端的数据交互使用统一的数据接口batchInvokeAction/invokeAction设计器典型案例-4向导式表单纵向页签表单右左左右上下左右上下24①绝密信息严禁泄露设计器典型案例-5（字段布局面板）字段布局面板也是一个flex容器动态计算每一行应方式多少字段空隙比较大每一行只想展示两列"fieldPanelItemAdaptiveMaxColumns":2"fieldPanelItemAdaptive":true25①绝密信息严禁泄露设计器典型案例-5（字段布局面板）占整行（设计器中属性）26①绝密信息严禁泄露设计器典型案例-5（字段布局面板）主题设置主题定制系列——JSON配置文件说明https://developer.kingdee.com/article/91102841573433856?productLineId=29&isKnowledge=2&lang=zh-CN27①绝密信息严禁泄露设计器典型案例-总结结合flex布局分解页面0328前端全局样式个性化扩展1.什么是个性化扩展2.获取和使用class信息开发class命名规范查找已开放的class方式3.举例说明使用步骤全局生效表单生效单个控件生效4.总结29①绝密信息严禁泄露前端全局样式个性化扩展平台多个控件开放了大量Class（即页面Class埋点）是什么、什么用处？基于Class编写web页面标准CSS样式脚本修改或覆盖标准控件外观样式等内容（包括字体样式、颜色、背景、边框等内容）开放了17个常用控件Class，控件列表如下30①绝密信息严禁泄露前端全局样式个性化扩展获取和使用Class信息——1.开放Class命名规范开放Class命名都以"kd-cq-"打头，其组织层级结构为：根节点-表单-容器/控件/字段31①绝密信息严禁泄露前端全局样式个性化扩展获取和使用class信息——2.查找已开放的Class方式https://developer.kingdee.com/article/612244233591941376?productLineId=29&isKnowledge=2&lang=zh-CN去除Class左右注释符号"//"即可直接拿来使用（1）开放class列表（2）通过浏览器查看对应控件对象开放Class*符合"开放Class命名规范"，在"开放Class"列表32①绝密信息严禁泄露前端全局样式个性化扩展使用步骤全局扩展CSS文件确认需要修改的样式Class名称依据UI样式需要编写对应Class内容，即CSS样式脚本独立上传入口或将CSS脚本通过"全局扩展JS"上传刷新页面例子1：修改签颜色（全局生效）33①绝密信息严禁泄露前端全局样式个性化扩展例子2：使用formId定位（单个页面生效）修改单个表单下标签颜色34①绝密信息严禁泄露前端全局样式个性化扩展例子3：结合自定义样式（单个控件生效）修改单个标签颜色35①绝密信息严禁泄露自定义样式使用1.找到根节点（自定义样式挂载的节点）2.找到目标节点和根节点关系子、孙、所有后代···常用选择器3.编写CSS样式常用css样式标签选择器div、p、imgID选择器#kdtest_checkboxfield类选择器.kd-cq-field属性选择器[field-item=true]伪类选择器:first-child后代选择器（空格）.kd-cq-fielddiv子选择器（>）.kd-cq-field>div尺寸与间距width和height、padding、margin、border文本样式font-family、font-size、color、text-align（如left,right,center,justify）背景与边框background-color、background-image、border-radius设计器中无法配置满意效果不建议使用36①绝密信息严禁泄露前端全局样式个性化扩展总结1、推荐阅读CSS教程，学习CSS样式基础使用方法2、使用任意ChatGPT软件通过问答方式获取样式设置具体内容示例如下编写CSS37①绝密信息严禁泄露前端全局样式个性化扩展总结1.修改样式的三个路径：•独立入口-前端扩展中上传css样式文件（推荐，全局生效、单个表单中生效、单个控件生效）•扩展js入口-上传css脚本•自定义样式文件（单个控件生效）2.全局样式个性化扩展使用步骤•找到class名称•编写CSS样式脚本•上传0438滚动条问题39①绝密信息严禁泄露滚动条问题出现时机：当内容超出容器的可见区域时容器：不可撑大或有高度（宽度）限制，允许滚动内容宽（高）>容器宽（高）滚动条的基本概念垂直滚动条：当内容的高度超过了容器的高度时出现，允许上下滚动。水平滚动条：当内容的宽度超出了容器的宽度时出现，允许左右滚动。相关属性(overflow)visible溢出内容会显示在元素框外，不会被剪切或隐藏hidden可以完全隐藏滚动条。auto根据需要显示或隐藏滚动条。scroll强制显示滚动条，即使内容没有超过容器大小。40①绝密信息严禁泄露滚动条问题如何使滚动条消失1.增大容器2.减小内容1.定位出现滚动条的容器3.使容器高度/宽度无限撑开（压缩比率为0、扩展比率为1）2.找出滚动条出现的原因（容器高度限制、设置了压缩比率为1）41①绝密信息严禁泄露滚动条问题如何使滚动条出现1.减小容器2.增大内容2.设置容器高度限制、设置了压缩比率为11.定位出现滚动条的容器3.设置内容可撑开，其高度/宽度大于容器高度/宽度42①绝密信息严禁泄露滚动条问题3.内层左侧flex面板未出现滚动条原因扩展比率为1压缩比率为0将上一层侧flex面板中的滚动条，换到左侧flex面板中显示1.定位出现滚动条的容器——>外层flex面板2.外层flex面板滚动条出现的原因压缩比率为14.解决：内层左侧flex面板压缩比率为1固定高度/上一层容器设置stretch外层flex面板扩展比率为0，压缩比率为143①绝密信息严禁泄露滚动条问题总结1.哪个容器出现滚动条，压缩比率为12.哪个容器不出现滚动条，压缩比率为044①绝密信息严禁泄露实例演示纵向页签表单45①绝密信息严禁泄露问卷调查本次分享反馈入口版权所有©金蝶国际软件集团有限公司始创于1993①绝密信息严禁泄露特别声明ClaimofConfidential本文件内容为①绝密信息严禁泄露：禁止未授权的内部、第三方人员使用与访问非专项必要的业务与项目负责人，收到此内容请立即删除严禁在未经过主管领导审批，发送给无关业务团队与人员特别声明ClaimofConfidential•版权所有©金蝶国际软件集团有限公司。保留一切权利。•未经金蝶国际软件集团有限公司的书面许可，任何单位或个人不得以任何形式或为任何目的复制或传播本文档的任何内容。本文档中包含的信息如有更改，恕不另行通知。•本文档提到的金蝶®、金蝶云®、金蝶云EBC®、金蝶云苍穹®、金蝶云星瀚®、金蝶云星空®、金蝶云星辰®、金蝶KIS®、K/3®、金蝶EAS®、友商网®、Apusic®和其它金蝶产品和服务以及它们各自的徽标均为金蝶软件（中国）有限公司或其关联公司在中国和其他国家或地区的商标或注册商标。本文档提到的所有其它产品和服务名称分别为它们各自公司的商标。•本文档所用数据均为虚构的模拟数据，不代表任何一家企业的真实情况，如有权利人认为文档中的任何内容存在侵权情况，请反馈给金蝶官方邮箱（DataSubjectRequest@kingdee.com），我们将在15个工作日内处理。•注：①绝密信息严禁泄露②机密信息严禁泄露③秘密信息严禁泄露④内部公开请勿外传
