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%;