js自定义组件之选项卡效果

最新推荐文章于 2022-11-13 20:35:01 发布

小可同学啊

最新推荐文章于 2022-11-13 20:35:01 发布

阅读量77

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_55041880/article/details/116136951

版权

js自定义组件之选项卡效果

设置 xzy-tab 标签
进行自定义属性设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
<body>
   
    <xzy-tab color = "red" date = '{
        "aaa" : "我是aaa的内容",
        "bbb" : "我是bbb的内容",
        "ccc" : "我是ccc的内容",
        "ddd" : "我是ddd的内容"
    }'></xzy-tab>

    <script>
    class XzyTab extends HTMLElement{
        constructor(){
            super();
            const shadom = this.attachShadow({
                    mode : 'open',
                });
                var oStyle = document.createElement("style");
                oStyle.innerHTML =  `
                .wrap{
                width: 400px;
                height: 300px;
                background-color: ${this.getAttribute("color")};
            }
            .ctrl{
                width: 400px;
                height: 50px;
            }
            .ctrl button{
                width: 100px;
                height: 50px;
            }`;
            shadom.appendChild(oStyle);
                var oWarp = document.createElement("div");
                oWarp.className = "wrap";
                var oCtrl = document.createElement("div");
                oCtrl.className = "ctrl";
                var oCon = document.createElement("div");
                oWarp.appendChild(oCtrl);
                oWarp.appendChild(oCon);
                shadom.appendChild(oWarp);
                var date = JSON.parse(this.getAttribute("date"));
            var arr = Object.keys(date);
            oCon.innerHTML = date["aaa"];
            oCtrl.innerHTML = arr.map(item=>`<button>${item}</button>`).join("");
            var aBtn = oCtrl.getElementsByTagName("button");
            for(var i=0;i<aBtn.length;i++){
                aBtn[i].onclick = function (){
                    oCon.innerHTML = date[this.innerHTML];
        }
    }

        }
    }
    customElements.define('xzy-tab',XzyTab);
    </script>
</body>
</html>

小可同学啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js自定义组件之选项卡效果

js自定义组件之选项卡效果设置 xzy-tab 标签进行自定义属性设置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
复制链接

扫一扫