前端必备:FrontendBlocks 3.9 版本重磅发布
重磅更新内容(划重点):可以支持相似块的class合并了,生成的css代码行数最高可降95%! 对于大家的使用反馈我非常重视,所以在改了两个小版本之后又用几个项目实测了近一年,这回终于正式发布3.9版本。 赶快发挥你对弹性布局的理解和设计才华吧!高度还原设计稿必备! 更新内容: 1、智能父子连字符关联:支持CSS名称连字符的父子关系关联,生成产物的命名更加省心 我们可以用连字符命名各个块,并且支持在块中嵌套块,这样我们就可以很方便的实现复杂的页面布局。 比如icon-btn,下面分别有icon-btn-image和icon-btn-text两个子元素, 那么在生成的时候会自动生成下面的这种代码: <div class="icon-btn" onclick="iconBtnClick()"> <img class="image"/> <div class="text">图标文字</div> </div> <style> .icon-btn{ box-sizing:border-box; border-bottom:1px solid rgba(229, 229, 229, 1); border-right:1px solid rgba(229, 229, 229, 1); text-align:left; display:flex; position:relative; height:92px; width:33%; flex-direction:column; justify-content:center; align-items:center; } .icon-btn{ user-select: none; } .icon-btn:hover{ opacity: 0.8; } .icon-btn:active{ opacity: 0.5; } .icon-btn>.image{ background-image:url(https://www.yumeisoft.com/demo-icon.jpg); background-size:cover; background-repeat:no-repeat; background-position:center; text-align:left; width:32px; height:32px; } .icon-btn>.text{ font-size:14px; color:rgba(102, 102, 102, 1); text-align:left; display:flex; position:relative; width:100%; flex-direction:column; align-items:center; } </style> 2、智能CSS精简:精简了生成的CSS代码,原来数千行的代码现如今只需几十行。对于结构相同并且所有子元素样式一模一样的,不会再生成新的block样式,而是直接复用之前的样式。 3、对于名称为-btn、-button结尾的元素自动加上点击效果,并且自动添加点击事件,写业务代码更方便,生成完几乎直接就可以开写! 4、增加了7个常用模板,可以更快速的构建布局。 5、极速设置面板里增加了一键“设置随机占位图”按钮,立即就能给当前块加背景,快速获得图文并茂的效果。 6、重写了导出vue和html的代码,现在导出规则已经和ToolsBar解耦,你可以更方便的写你想要的任何导出规则。 7、导出界面增加了一键复制功能,粘贴到代码里就能用!更贴心。