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

本章最先引见slot机制。

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

但说了这么久,slot元素究竟是什么鬼?slot是一个占位符。它有一个name属性。如果另一个处所,也有一个元素,它带一个slot属性,当这两个属性值一致,那末谁人元素就会 挪过来,替代掉这个slot元素。

<p id="eee"><slot name="aaa">这是插槽元素,这内里的内容是什么也无关</slot></p>
<p id="kkk"><span slot="aaa">这是要挪动的元素</span></p>

末了会转换为

<p id="eee"><span slot="aaa">这是要挪动的元素</span></p>
<p id="kkk"></p>

是否是很奇异呢?然则这不是一切浏览器都支撑。avalon2 运用了一些把戏让IE6也支撑slot。

为了轻易我们下面的解说。我们须要引入更多观点。

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

然后到我们的组件,我们运用wbr, xmp, template, ms-*等元夙来声明它们是某种组件,它们称之为组件容器(一切带ms-widget属性的元素都是插槽元素)。它们与插槽元素一样,是用来占位与被替代掉的。

<div ms-controller='widget1' >
    <xmp :widget="{is:'ms-button'}" ><span slot="content">button!</span></xmp>
    <p><button :click="@click">click</button></p>
</div>

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

 

 avalon.component('ms-button', {
    template: '<button type="button"><slot name="content" /></button>',
    defaults: { }
})

template内里有slot元夙来占位,而组件容器内里有带slot属性的元夙来替代。

《一步步编写avalon组件03:切换卡组件》

一个组件能够具有N个slot元素,它们的name值不能反复。然则表面的插卡元素则能够反复。

    avalon.component('ms-tabs', {
        template: '<div><p>它有{{@num}}个面板</p><slot name="tab"/></div>',
        defaults: {
            num: 3
        }
    })
    vm = avalon.define({
        $id: 'widget1'
    })
<div ms-controller='widget1' >
    <xmp :widget="{is:'ms-tabs'}">
        <div slot="tab">面板1</div>
        <hr>
        <div slot="tab">面板2</div>
        <hr>
        <div slot="tab">面板3</div>
        <hr>
    </xmp>
</div>

天生的构造以下:

《一步步编写avalon组件03:切换卡组件》

这也是我们做切换卡的基本。好了,我们看一下切换卡是怎样做的。

DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src='../../dist/avalon.js'></script>
        <script>
            function heredoc(fn) {
                return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                        replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
            }
            avalon.component('ms-tabs', {
                template: heredoc(function () {
                    /*
                     <div>
                     <div><slot name="btn"/></div>
                     <div><slot name="tab"/></div>
                     </div>
                     */
                }),
                defaults: {
                    buttons: [],
                    tabs: [],
                    active: function (index) {
                        this.activeIndex = index
                    },
                    activeIndex: 0,
                }

            })
            var vm = avalon.define({
                $id: 'widget1',
                buttons: [111, 222, 333],
                aa: '动态内容',
                ddd: function () {
                    console.log('xxxx')
                },
                change: function () {
                    vm.aa = '更新内容'+(new Date -0)
                }
            })
        </script>
    </head>
    <body>
        <h1>slot的运用</h1>
        <p>对slot元素运用轮回绑定天生大批元素,一同迁进组件内部</p>
        <div ms-controller='widget1' >
            <xmp :widget="{is:'ms-tabs',buttons: @buttons}">
                <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>
            </xmp>
        </div>
    </body>
</html>

切换卡包括两大块内容,上面用来切换的按钮,及下面的用来显现的面板。因为每次只显现一个面板,我们须要运用ms-visible来做隐蔽。

《一步步编写avalon组件03:切换卡组件》

末了天生的切换卡是如许的。

我们能够下如许的结论。slot用来为组件传入大片内容的, ms-widget设置项是用来传入够短的设置项。

人人能够在这里看到源码

    原文作者:司徒正美
    原文地址: https://segmentfault.com/a/1190000006174092
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞