diff --git a/index.html b/index.html index 03d2841..23fc47c 100644 --- a/index.html +++ b/index.html @@ -401,7 +401,7 @@

用于内容分组和导航,支持描述文本和自定义高亮颜色。

- +
选项卡内容区域
@@ -522,7 +522,7 @@ // 选项卡切换事件 document.getElementById('demoTab').addEventListener('change', function (e) { - document.getElementById('tabContent').innerText = `切换到: ${e.detail.innerText}` + document.getElementById('tabContent').innerText = e.detail.innerText }) // 搜索框事件 diff --git a/index.js b/index.js index f261657..0eb9dd8 100644 --- a/index.js +++ b/index.js @@ -424,9 +424,9 @@ class UI { this.ele.querySelector('.select-button').removeAttribute('disabled') } } else if (name == 'value') { - this.dl.innerHTML = '' + if (this.dl) this.dl.innerHTML = '' this.addOption() - this.button.innerText = this.placeholder || this.options[this.current].text + if (this.button) this.button.innerText = this.placeholder || this.options[this.current].text } } // 重置 @@ -446,7 +446,7 @@ class UI { const options = list.split(',') const optionValues = value.split(',') - this.dl.innerHTML = '' + if (this.dl) this.dl.innerHTML = '' // 添加选项 options.forEach((item, index) => { @@ -458,7 +458,7 @@ class UI { dd.classList.add('selected') } this.options.push({ text: item, value: optionValues[index] }) - this.dl.appendChild(dd) + if (this.dl) this.dl.appendChild(dd) }) } // 初始化 @@ -928,10 +928,12 @@ class UI { }) } } - // TODO:对话框 + // 对话框 this.Dialog = class Dialog extends HTMLElement { // 可用属性 - static observedAttributes = ['subtitle', 'content', 'hidden'] + static get observedAttributes() { + return ['subtitle', 'content', 'hidden'] + } constructor() { super() this.dialog = null @@ -1016,7 +1018,7 @@ class UI { --btn-background-color: linear-gradient(to bottom, #7983ff, #3297f3); } .dialog-mask { - position: absolute; + position: fixed; width: 100%; height: 100%; background-color: var(--mask-color); @@ -1103,10 +1105,12 @@ class UI { Object.assign(this, options) } } - // TODO:模态框 + // 模态框 this.Modal = class Modal extends HTMLElement { // 可用属性 - static observedAttributes = ['subtitle', 'content', 'hidden'] + static get observedAttributes() { + return ['subtitle', 'content', 'hidden'] + } constructor() { super() // 模态框 @@ -1116,7 +1120,7 @@ class UI { // 标题 this.subtitle = '标题' // 内容 - this.content = '第一行

第二行

第三行

第四行' + this.content = '内容' // 动画定时器 this.timer = null // 是否隐藏 @@ -1251,7 +1255,9 @@ class UI { // TODO:选项卡 this.Tab = class Tab extends HTMLElement { // 可用属性 - static observedAttributes = ['list', 'current'] + static get observedAttributes() { + return ['list', 'current'] + } constructor() { super() // 选项卡 @@ -1296,7 +1302,7 @@ class UI { --text-color: black; --background-color: transparent; --description-color: #424242; - --gap: 5em; + --gap: 1em; } .tab-list { width: 100%;