fix: select

XboxYan · May 5, 2023 · 81a473a · 81a473a
1 parent f6812e3
commit 81a473a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/components/select/index.js b/components/select/index.js
@@ -5,7 +5,6 @@ import "../button/index.js";
 import "../icon/index.js";
 
 export default class Select extends Base {
-  #valueEl;
 	#slots;
 	#popoverEl;
 	#buttonEl;
@@ -29,7 +28,6 @@ export default class Select extends Base {
 				</div>
 			</xy-popover>
       `;
-		this.#valueEl = this.querySelector("[behavior='selected-value']") || this.querySelector("[slot='button']") || this.shadowRoot.querySelector("[behavior='selected-value']");
 		this.#popoverEl = this.shadowRoot.getElementById("popover");
 		this.#buttonEl = this.shadowRoot.getElementById("button");
 	}
@@ -39,6 +37,10 @@ export default class Select extends Base {
 		button.focus(options);
 	}
 
+	get #valueEl() {
+		return this.querySelector("[behavior='selected-value']") || this.querySelector("[slot='button']") || this.shadowRoot.querySelector("[behavior='selected-value']");
+	}
+
   get value() {
 		return this.#valueEl.getAttribute("value");
 	}
@@ -88,7 +90,6 @@ export default class Select extends Base {
 	}
 
 	connectedCallback() {
-		this.#valueEl = this.querySelector("[behavior='selected-value']") || this.querySelector("[slot='button']") || this.shadowRoot.querySelector("[behavior='selected-value']");
 		this.#slots = this.shadowRoot.getElementById("slot");
 		this.#slots.addEventListener("slotchange", () => {
 			if (this.#popoverEl.parentNode === document.body) {

diff --git a/docs/components/select.md b/docs/components/select.md
@@ -214,10 +214,10 @@ select.removeAttribute('disabled');
 还可以指定选中文本显示的节点，通过`behavior="selected-value"`指定（没有该属性时默认渲染到`slot="button"`本身）
 
 <style scoped>
-.custom-button::part(button):active{
+.custom-select-button::part(button):active{
     background: transparent;
 }
-.custom-button label{
+.custom-select-button label{
     position: absolute;
     font-size: 12px;
     background: var(--primary-bg);
@@ -229,7 +229,7 @@ select.removeAttribute('disabled');
 
 <div class="wrap">
 <xy-select>
-    <xy-button class="custom-button" slot="button">
+    <xy-button class="custom-select-button" slot="button">
         <label>地区</label>
         <span behavior="selected-value"></span>
     </xy-button>