Js原生封裝選項卡組件

class MyTab extends HTMLElement{  //創建一個類名MyTab
    constructor(){ //構造函數
        super();  //指向父類構造函數，必須要有的

        const shadow = this.attachShadow({ //影子dom
            mode : 'open' //開放的封裝模式
        })

        let n = 0;
        let titles = ['標題1','標題2','標題3'];
        let inners = ['內容1','內容2','內容3'];

        for(let i=0;i<3;i++){
            let button = document.createElement('button');
            button.innerHTML = titles[i];

            if(i == n){
                button.classList.add('active');
            }

            button.onclick = function () {
                let aButton = shadow.querySelectorAll('button');
                let aP = shadow.querySelectorAll('p');

                for(let i=0;i<3;i++){
                    aButton[i].classList.remove('active');
                    aP[i].classList.remove('active');
                }
                this.classList.add('active');
                aP[i].classList.add('active');
            }

            shadow.appendChild(button);
        }

        for(let i=0;i<3;i++){
            let p = document.createElement('p');
            p.innerHTML = inners[i];

            if(i == n){
                p.classList.add('active');
            }

            shadow.appendChild(p);
        }

        const style = document.createElement('style');

        style.textContent = `
                button.active{
                    background : yellow;
                }
                p{
                    display:none;
                }
                p.active{
                    display:block;
                }
            `;

        shadow.appendChild(style);

        let div = document.createElement('div'); //插槽
        div.innerHTML = '<slot></slot>';

        shadow.appendChild(div);

    }
}

customElements.define('my-tab',MyTab); //注冊組件

 

然后在html文件里面寫入<my-tab></my-tab>就可以使用組件了