webComponent的实战案例

最新推荐文章于 2024-03-26 07:42:09 发布

vues

最新推荐文章于 2024-03-26 07:42:09 发布

阅读量424

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/hbwang_716/article/details/113738865

版权

js 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>文档标题</title>
</head>

<body>
    <zf-button type="primary">我的按钮</zf-button>
    <zf-button type="default">我的按钮</zf-button>

    <template id="btn">
        <button class="zf-button">
            <slot>默认按钮</slot>
        </button>
    </template>

    <script>
        class ZfButton extends HTMLElement {
            constructor() {
                super();
                let shadow = this.attachShadow({ mode: 'open' })
                let btnTmpl = document.getElementById('btn');

                let cloneTemplate = btnTmpl.content.cloneNode(true);

                const style = document.createElement('style');
                let type=this.getAttribute('type') || 'default';
                const btnList={
                    'primary':{
                        background:'#409eff',
                        color:'#fff'
                    },
                    'default':{
                        background:'#909090',
                        color:'#fff'
                    }
                }

                style.textContent = `
                    .zf-button{
                        border:none;
                        outline:none;
                        border-radius:4px;
                        padding:5px 10px;
                        background:${btnList[type].background};
                        color:${btnList[type].color}
                    }
                `
                
                // dom操作具备移动型
                shadow.appendChild(style);
                shadow.appendChild(cloneTemplate);
            }
        }
        window.customElements.define('zf-button', ZfButton);
        // 必须用中横线连接
        /**
         *  Custom elements
         *  shadow DOM 可以实现完全的隔离
         *  HTML templates
         *  独立的组件  webComponent
         *
         * **/
    </script>
</body>

</html>

vues

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
webComponent的实战案例

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>文档标题</title></head><body> <zf-button t.
复制链接

扫一扫