html创建可复用的web组件,下拉框-CSDN博客

本文链接：https://blog.csdn.net/maliao5/article/details/141323104

第一步，创建一个web.js文件

class DropdownMenu extends HTMLElement {
    constructor() {
        super();
        // 初始化shadow DOW
        const shadow = this.attachShadow({ mode: 'open' });

        shadow.innerHTML = `
            <style>
                .selse {
                    width: 150px;
                    display: inline-block;
                }

                .selse-title {
                    padding: 5px 10px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border: 1px solid #47E6F1;
                    background-color: #ccc;
                }

                .selse-title>img {
                    display: block;
                    width: 25px;
                }

                .selse-div {
                    margin-top: 5px;
                    border-radius: 5px;
                    display: flex;
                    flex-direction: column;
                    border: 1px solid #47E6F1;
                    background-color: #ccc;
                }
                .selse-div>div {
                    padding: 5px 10px;
                    color: #fff; 
                    
                }
                    .selse-div>div:hover {
                     background-color: #47E6F1;
                }

                .selse-div>slot {
                    display: flex;
                    flex-direction: column;
                }

                .selse-div>slot::slotted(div) {
                    padding: 5px 10px;
                    color: #fff;
                }

                .selse-div>slot::slotted(div:hover) {
                    background-color: #47E6F4;
                }

                .hide {
                    display: none !important;
                }
            </style>
             <div style="display: flex;">
            <div class="selse">
                <div class="selse-title">
                    <span class="title">选择</span>
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAASRJREFUWEdjZBhgwDjA9jOMOmA0BEZDAB4C7s++FDAwMNQzMDAI0DZrMj749+9/4G4Zngsge5Ad8J72lkO89p+BccMuKe5AdAfcZ2BgUKCt76Gm/2dYsFOaJxHFAV5Pvhj8ZWLYT4dQeMD487fjDkXBBygOAHHo4AgUyzEcQGNHYFiO1QE0cgRWy3E6ACTh8fizw39mRlCaoBTgtByvA8COePIl4T8Tw3wKXIDXcoIOoNARBC0nygHkOeL/B8affwxhWQ1fCBJdGREfHf8/MP/747hNRhBc1BICRDuAuJAgzXKiowDZF+5PvhQwMDH0Y/qMdMvJcgBIk9vTr/WMjP8bEI4gz3KyHYDqCPItp8gBhBIXsfIkJUJiDSVF3agDRkNgNAQALI+PIUHW54QAAAAASUVORK5CYII=" alt="">
                </div>
                <div class="selse-div hide">
                    <slot></slot>
                </div>
            </div>
              </div>
        `;

        const selseTitle = shadow.querySelector('.selse-title');
        const selseDiv = shadow.querySelector('.selse-div');
        const title = shadow.querySelector('.title');
        // 顶部点击，打开下拉框
        selseTitle.addEventListener('click', () => {
            selseDiv.classList.toggle('hide');
        });
        //下拉框点击，关闭，回显点击的内容 
        selseDiv.addEventListener('click', (e) => {
            if (e.target.tagName === 'DIV') {
                selseDiv.classList.add('hide');
                title.innerHTML = e.target.innerText;
            }
        });
    }

    static get observedAttributes() {
        return ['items'];
    }

    // 循环往下拉框追加传入的内容值
    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'items') {
            const selseDiv = this.shadowRoot.querySelector('.selse-div');
            const title = this.shadowRoot.querySelector('.title');
            selseDiv.innerHTML = ''; // Clear existing items
            const items = newValue.split(',');
            title.innerHTML = items[0]
            items.forEach(item => {
                const div = document.createElement('div');
                div.textContent = item.trim();
                selseDiv.appendChild(div);
            });
        }
    }
}
// 定义下拉框标签名
customElements.define('dropdown-menu', DropdownMenu);