html创建可复用的web组件,下拉框

目录

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

 第二步，引入web.js，使用组件

展示：里面的样式，可以按照自己的需求更改 。

---

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

class DropdownMenu extends HTMLElement {constructor() {super();// 初始化shadow DOWconst 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 itemsconst 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);

 第二步，引入web.js，使用组件

展示：里面的样式，可以按照自己的需求更改 。