一步步编写avalon组件05：树组件

Ocean 发布于2019-08-22 10:35 / 1358人阅读

摘要：给人印象中，树组件是非常令人畏惧的一个组件，超级复杂，超级难写。但使用来做，这却是级其简单的一件事。换言之，我们用元素作为树的节点，那么树组件内部也需要存在树组件，需要形成递归结构。的机制又是出场的时候了。

给人印象中，树组件是非常令人畏惧的一个组件，超级复杂，超级难写。但使用avalon2来做，这却是级其简单的一件事。首先从样式入做，无序列表是天然可用的树结构，几个UL元素套在一起，它们就自然处理好缩进问题。换言之，我们用UL元素作为树的节点，那么树组件内部也需要存在树组件，需要形成递归结构。avalon2的slot机制又是出场的时候了。

因此我们的树的结构大概是

树
   子树
   子树
       子树

此外，树拥有还有折叠子树的功能，这好办，我们使用ms-visible实现隐藏显示子树。通过ms-click来为ms-visible传参。



    
        
        Title

看，我们的树组件一下子就出来，虽然看起来非常朴素，但的确是树，如果找设计师美化一下，添加些好看的ICON，完全是ztree没有什么两样。当然我们也可以照搬ztree的图标。最重要的，代码太少了，维护起来超方便。

云服务器 GPU云服务器树组件一步步搭建框架一步步搭建物联网系统组件和组件通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90899.html

一步步编写avalon组件03：切换卡组件

摘要：那么组件容器是被谁替换呢当然是组件。我们使用来定义组件时，必须有一个属性，它是一个模块，它会转换为组件。一个组件可以拥有个元素，它们的值不能重复。好了，我们看一下切换卡是如何做的。本章开始介绍slot机制。 slot是WEBComponent引进的东西，叫做插槽。在浏览器中，它为一个content元素。不过有资料表明，它会更名为slot。并且在其他语言的模板引擎中，slot标签更为...

kbyyd24 2019-08-22 10:35 评论0 收藏0
一步步编写avalon组件04：GRID组件

摘要：组件表格是非常常用的组件，尤其是后台系统。它的制定也是五花八门的。因此有大量的组件，每个都庞大无比，集成各种功能，复杂得像。强大的组件机制就此而生。通常就是一个表头，表头固定。要与分析栏进行联动。 grid组件（表格）是非常常用的组件，尤其是后台系统。它的制定也是五花八门的。因此jQuery有大量的grid组件，每个都庞大无比，集成各种功能，复杂得像Excel。但即便是这样，我们的产品...

reclay 2019-08-22 10:35 评论0 收藏0
吐槽专用

摘要：最终选择了兼容到的，终于使用上框架，虽然它只是个。没有对比就没有伤害本来想着技术栈统一，移动端也准备使用。于是，之后对移动端的技术选型上更加慎重了，最终采用了文档更漂亮的。易用还真不易用，坑还真多。吐槽 avalon.js 历史背景需求重大调整，所有业务推倒重来（pc端主要任务涉及管理后台类型的网站）；开发周期很紧，过年前要上线；公司pc端业务要求兼容到ie8； 2015年前...

zxhaaa 2019-08-22 10:36 评论0 收藏0
avalon与masonry的结合

摘要：相关组件版本最近，在公司的项目中，要开发一个使用瀑布流的前台，衡量了各种解决方案后，还是觉得最成熟，所以就选用了它。测试的结果很令人沮丧，依然没有控制节点的位置，所以应该不是这个问题。相关组件版本：avalon 1.3.6、masonry 3.1.5 最近，在公司的项目中，要开发一个使用瀑布流的前台，衡量了各种解决方案后，还是觉得masonry最成熟，所以就选用了它。而在之前开发后台...

Kosmos 2019-08-22 10:59 评论0 收藏0
avalon 项目实践记录

摘要：业务组件模块化拆分复用后整体可维护性也得到了很大提升。先赞一个当然凡事都有相对的一面，此篇文字就主要记录自己在项目过程中的一些问题。原文地址：http://mtmzorro.github.io/201... 项目背景需要兼容到IE7（根据数据支撑重要说服抛弃IE6）上个版本传统 jQuery DOM 开发模式，经过无数手维护已经惨不忍睹核心业务流程，可维护性、健壮性要求高主...

yvonne 2019-08-20 17:35 评论0 收藏0