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

kbyyd24 发布于2019-08-22 10:35 / 1644人阅读

摘要：那么组件容器是被谁替换呢当然是组件。我们使用来定义组件时，必须有一个属性，它是一个模块，它会转换为组件。一个组件可以拥有个元素，它们的值不能重复。好了，我们看一下切换卡是如何做的。

本章开始介绍slot机制。

slot是WEBComponent引进的东西，叫做插槽。在浏览器中，它为一个content元素。不过有资料表明，它会更名为slot。并且在其他语言的模板引擎中，slot标签更为常用。因此avalon2的组件机制使用slot元素。

但说了这么久，slot元素到底是什么鬼？slot是一个占位符。它有一个name属性。假如另一个地方，也有一个元素，它带一个slot属性，当这两个属性值一致，那么那个元素就会挪过来，替换掉这个slot元素。

这是插槽元素，这里面的内容是什么也无关

这是要移动的元素

最后会转换为

这是要移动的元素

是不是很神奇呢？但是这不是所有浏览器都支持。avalon2 使用了一些魔术让IE6也支持slot。

为了方便我们下面的讲解。我们需要引入更多概念。

slot标签元素: 插槽元素，用来占位，就是我们上学时，用一本书放在某个座位上占着位置。
带slot属性的元素： 插卡元素，用来替换同名的插槽元素。

然后到我们的组件，我们使用wbr, xmp, template, ms-*等元素来声明它们是某种组件，它们称之为组件容器（所有带ms-widget属性的元素都是插槽元素）。它们与插槽元素一样，是用来占位与被替换掉的。


    <span slot="content">button!</span>

那么组件容器是被谁替换呢？当然是组件。我们使用avalon.component来定义组件时，必须有一个template属性，它是一个HTML模块，它会转换为组件。比如说上面的ms-button.

 avalon.component("ms-button", {
    template: "",
    defaults: { }
})

template里面有slot元素来占位，而组件容器里面有带slot属性的元素来替换。

一个组件可以拥有N个slot元素，它们的name值不能重复。但是外面的插卡元素则可以重复。

    avalon.component("ms-tabs", {
        template: "它有{{@num}}个面板
",
        defaults: {
            num: 3
        }
    })
    vm = avalon.define({
        $id: "widget1"
    })


    
        <div slot="tab">面板1</div>
        <hr>
        <div slot="tab">面板2</div>
        <hr>
        <div slot="tab">面板3</div>
        <hr>

生成的结构如下：

这也是我们做切换卡的基础。好了，我们看一下切换卡是如何做的。

DOCTYPE html>


    
        TODO supply a title
        
        
        
        
    
    
        slot的使用
        对slot元素使用循环绑定生成大量元素,一起迁进组件内部
        
            
                <button ms-for="(index,button) in @buttons"
                    ms-click="@active(index)"
                    type="button"
                    slot="btn"
                    >{{button}}</button>
                <div slot="tab" ms-visible="0 == @activeIndex">
                    <p>这是面板1</p>
                        
                </div>
                 <div slot="tab" ms-visible="1 == @activeIndex">
                    {{@aa}} <button ms-click="@change" type="button">change</button>

                </div>
                 <div slot="tab" ms-visible="2 == @activeIndex">
                    这是面板3
                </div>

切换卡包含两大块内容，上面用来切换的按钮，及下面的用来显示的面板。由于每次只显示一个面板，我们需要使用ms-visible来做隐藏。

最后生成的切换卡是这样的。

我们可以下这样的结论。slot用来为组件传入大片内容的， ms-widget配置项是用来传入够短的配置项。

大家可以在这里看到源码。

服务器托管云服务器切换组件一步步搭建框架一步步搭建物联网系统组件和组件通信

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

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

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

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

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

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

reclay 2019-08-22 10:35 评论0 收藏0
avalon js单页面滑动切换

摘要：触摸事件在这里的作用是演示滑动可能产生的效果，最终决定哪一页是当前页的是滑动事件。在这里触摸事件移动的距离达到一定值时前面事件回调已经过滤了不符合要求的事件，就会触发滑动事件。效果 chrome模拟器showImg(https://segmentfault.com/img/bVqo2j);真机http://v.youku.com/v_show/id_XMTM2MjExNTM5Ng==...

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

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

yvonne 2019-08-20 17:35 评论0 收藏0
avalon2初体验

摘要：最近因项目进展需求对现有项目进行重构，由于目前项目还未实现真正意义上的前后端分离后续会循序重构实现，在时间紧产品循序迭代的情况下，想一次性实现前后端分离精力实在有限主要是前端开发人力不足。最近因项目进展需求对现有项目进行重构，由于目前项目还未实现真正意义上的前后端分离（后续会循序重构实现），在时间紧产品循序迭代的情况下，想一次性实现前后端分离精力实在有限（主要是前端开发人力不足）。所...

youkede 2019-08-01 15:51 评论0 收藏0