TASK #107657 OverflowMenu

src/components/overflowmenu/overflowmenu.ts

@@ -35,40 +35,46 @@ export class StarOverflowMenu extends LitElement {
     const buttonbottom = Number(buttonposition?.bottom)
     const buttonleft = Number(buttonposition?.left)
     const buttonright = Number(buttonposition?.right)
-    const menuleft = (buttonright - buttonleft) / 2 + buttonleft
     // 通过“open”判断是否显示menu
     if (this.open == true) {
       for (var i = 0; i < this._evenEl.length; i++) {
+        const slotelement = this._evenEl[i]
         // 设置div显示display状态
         mu.style.display = "block"
         // 设置显示位置类型
-        this._evenEl[i].style.position = 'fixed'
+        // this._evenEl[i].style.position = 'fixed'
+        slotelement.style.position = 'relative'
         this.open = false
         // 获取溢出菜单width及height
-        const menuwidth = this._evenEl[i].getBoundingClientRect().width
+        const menuwidth = slotelement.getBoundingClientRect().width
-        const menuheight = this._evenEl[i].getBoundingClientRect().height
+        const menuheight = slotelement.getBoundingClientRect().height
         // 弹出菜单边界,rightline和bottomline分别为是否超过右侧和下侧显示区域
         const rightline = (buttonright + menuwidth > bodywidth)?true:false
         const bottomline = (buttonbottom + menuheight > bodyheight)?true:false
         // 右下角边界
         if (rightline && bottomline) {
-          this._evenEl[i].style.right = bodywidth - buttonright + 'px'
+          // this._evenEl[i].style.right = bodywidth - buttonright + 'px'
-          this._evenEl[i].style.top = buttontop - menuheight + 'px'
+          // this._evenEl[i].style.top = buttontop - menuheight + 'px'
+          // this._evenEl[i].style.right = menuwidth + (bodywidth - buttonright) - (buttonright - buttonleft) + 'px'
+          slotelement.style.left = -(menuwidth - (buttonright - buttonleft)) + 'px'
+          slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px'
           return
         } else if (rightline) {
           // 右侧边界
-          this._evenEl[i].style.right = bodywidth - buttonright + 'px'
+          // this._evenEl[i].style.right = bodywidth - buttonright + 'px'
-          this._evenEl[i].style.top = buttonbottom + 'px'
+          // this._evenEl[i].style.top = buttonbottom + 'px'
+          slotelement.style.right = menuwidth - (buttonright - buttonleft) + 'px'
           return
         } else if (bottomline) {
           // 下侧边界
-          this._evenEl[i].style.top = buttontop - menuheight + 'px'
+          // this._evenEl[i].style.top = buttontop - menuheight + 'px'
-          this._evenEl[i].style.left = menuleft + 'px'
+          // this._evenEl[i].style.left = menuleft + 'px'
+          slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px'
           return
         } else {
           // 正常情况
-          this._evenEl[i].style.left = menuleft + 'px'
+          // this._evenEl[i].style.left = menuleft + 'px'
-          this._evenEl[i].style.top = buttonbottom + 'px'
+          // this._evenEl[i].style.top = buttonbottom + 'px'
           return
         }
       }

src/test/panels/overflowmenu/overflowmenu.ts

@@ -25,6 +25,7 @@ export class PanelOverflowMenu extends LitElement {
     }
     // 如果点在空白处则关闭菜单
     if (tagName != 'star-overflowmenu') {
+      // 获取所有的star-overflowmenu
       var menulist = this.shadowRoot!.querySelectorAll('star-overflowmenu')
       for (var i = 0; i < menulist.length; i++) {
         menulist[i].open = true
@@ -58,40 +59,11 @@ export class PanelOverflowMenu extends LitElement {
     return html`
       <div>
         <star-overflowmenu icon="more">
-          <star-ul
+          <star-ul type=${UlType.BASE}>
-            type=${UlType.HEADER_FOOTER}
-            title="完整栏"
-            text="可在上栏中填充任意类型的条目"
-          >
-            <star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
             <star-li
-              type=${LiType.ONLY_LABEL}
+              type=${LiType.ONLY_EDIT}
-              label="带跳转的条目"
+              label="星光麒麟"
-              href="#about"
+              default="星光麒麟"
-            ></star-li>
-            <star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
-            <star-li
-              type=${LiType.ONLY_LABEL}
-              label="带跳转的条目"
-              href="#about"
-            ></star-li>
-            <star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
-            <star-li
-              type=${LiType.ONLY_LABEL}
-              label="带跳转的条目"
-              href="#about"
-            ></star-li>
-            <star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
-            <star-li
-              type=${LiType.ONLY_LABEL}
-              label="带跳转的条目"
-              href="#about"
-            ></star-li>
-            <star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
-            <star-li
-              type=${LiType.ONLY_LABEL}
-              label="带跳转的条目"
-              href="#about"
             ></star-li>
           </star-ul>
         </star-overflowmenu>
@@ -131,12 +103,12 @@ export class PanelOverflowMenu extends LitElement {
           icon="more"
           style="position: fixed; bottom: 0; left: 0;"
         >
-          <star-ul type=${UlType.BASE}>
+          <star-ul
-            <star-li
+            type=${UlType.ONLY_HEADER}
-              type=${LiType.ONLY_EDIT}
+            title="头部有文字"
-              label="星光麒麟"
+            text="尾部有文字"
-              default="星光麒麟"
+          >
-            ></star-li>
+            <star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
           </star-ul>
         </star-overflowmenu>
 
@@ -157,7 +129,11 @@ export class PanelOverflowMenu extends LitElement {
   }
 
   static styles = css`
-    :host,
+    :host {
+      display: block;
+      width: 100vw;
+      height: 100vh;
+    }
     div {
       display: block;
       width: 100vw;