一步步編寫avalon組件03：切換卡組件

kbyyd24 發布于2019-08-22 10:35 / 1759人閱讀

摘要：那么組件容器是被誰替換呢當然是組件。我們使用來定義組件時，必須有一個屬性，它是一個模塊，它會轉換為組件。一個組件可以擁有個元素，它們的值不能重復。好了，我們看一下切換卡是如何做的。

本章開始介紹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配置項是用來傳入夠短的配置項。

大家可以在這里看到源碼。

云服務器 GPU云服務器切換組件一步步搭建框架一步步搭建物聯網系統組件和組件通信

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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