diff --git a/src/components/button/button.ts b/src/components/button/button.ts index a5e7093..d41f6f9 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -121,6 +121,10 @@ export class StarButton extends StarBaseElement { align-items: center; margin: auto; } + :host(#menuitem) button { + font-size: 24px; + height: 76px; + } `, ] } diff --git a/src/components/overlay/active-overlay.ts b/src/components/overlay/active-overlay.ts index 8746c37..e79e441 100644 --- a/src/components/overlay/active-overlay.ts +++ b/src/components/overlay/active-overlay.ts @@ -1,11 +1,10 @@ import {LitElement, html, TemplateResult, CSSResultArray} from 'lit' import {customElement, property} from 'lit/decorators.js' import {OverlayOpenDetail} from './overlay-types' -import { sharedStyles } from './overlaystyle' +import {sharedStyles} from './overlaystyle' @customElement('star-activeoverlay') export class ActiveOverlay extends LitElement { - public static override get styles(): CSSResultArray { return [sharedStyles] } @@ -20,9 +19,6 @@ export class ActiveOverlay extends LitElement { @property({reflect: true}) public placement?: String - offset!: number - skidding!: number - public constructor() { super() } @@ -37,8 +33,6 @@ export class ActiveOverlay extends LitElement { this.root = detail.root } - private stealOverlayContent(element: HTMLElement) {} - // 位置更新函数 public updatePosition = () => { // 设置最大显示宽度和高度 @@ -57,38 +51,36 @@ export class ActiveOverlay extends LitElement { const targettop = Number(targetNodePosition?.top) const targetbottom = Number(targetNodePosition?.bottom) const targetleft = Number(targetNodePosition?.left) - const targetright = Number(targetNodePosition?.right) // 设置样式 this.style.position = 'relative' this.style.zIndex = '10' this.style.maxWidth = availableWidth + 'px' this.style.maxHeight = availableHeight + 'px' // 边界判断：targetright指被点击的节点右边界，contentwidth表示将要显示的内容的宽度 - const rightline = targetright + contentwidth > bodywidth ? true : false // 右侧越界条件 + const rightline = targetleft + contentwidth > bodywidth ? true : false // 右侧越界条件 const bottomline = targetbottom + availableHeight > bodyheight ? true : false //下方越界条件 + let left: number + let top: number // 右下角边界 if (rightline && bottomline) { - this.style.left = targetleft - (contentwidth - targetnode.offsetWidth) + 'px' - this.style.top = targettop - contentheight - targetnode.offsetHeight + 'px' - return + left = targetleft - (contentwidth - targetnode.offsetWidth) + top = targettop - contentheight - targetnode.offsetHeight } else if (rightline) { // 右侧边界 - this.style.left = - targetleft - (contentwidth - targetnode.offsetWidth) + 'px' - this.style.top = targettop + targetnode.offsetHeight + 'px' - return + left = targetleft - (contentwidth - targetnode.offsetWidth) + top = targettop + targetnode.offsetHeight } else if (bottomline) { // 下侧边界 - this.style.left = targetleft + 'px' - this.style.top = targettop - contentheight - targetnode.offsetHeight + 'px' - return + left = targetleft + top = targettop - contentheight - targetnode.offsetHeight } else { // 正常情况 - this.style.left = targetleft + 'px' - this.style.top = targettop + targetnode.offsetHeight + 'px' - return + left = targetleft + top = targettop + targetnode.offsetHeight } + this.style.left = left + 'px' + this.style.top = top + 'px' } private onSlotChange(): void { diff --git a/src/components/overlay/overlay-stack.ts b/src/components/overlay/overlay-stack.ts index 5116cdd..1d7af3e 100644 --- a/src/components/overlay/overlay-stack.ts +++ b/src/components/overlay/overlay-stack.ts @@ -23,17 +23,17 @@ export class OverlayStack { activeOverlay.root?.appendChild(placeholderTemplate) // // 将activeoverlay添加到body底部显示div中 let showmenu = document.querySelector('#showmenu') as HTMLElement //后续关联模态时 - if(showmenu==null){ + if (showmenu == null) { showmenu = document.createElement('div') - showmenu.setAttribute('id','showmenu') + showmenu.setAttribute('id', 'showmenu') Object.assign(showmenu.style, { width: '100vw', height: '100vh', position: 'fixed', backgroundColor: '#00000033', justifycontent: 'center', - }); - }else{ + }) + } else { showmenu.style.display = 'fixed' } // 为显示div添加overlay并将div添加到body中 @@ -42,9 +42,9 @@ export class OverlayStack { // 将activeoverlay添加到已打开overlay数组中 this.overlays.push(activeOverlay) // 为showmenu显示层添加监听 - showmenu.addEventListener('click',function(e:Event){ - console.log(e.target); - if(e.target == this){ + showmenu.addEventListener('click', function (e: Event) { + console.log(e.target) + if (e.target == this) { root!.dispatchEvent( new Event('test', { bubbles: true, @@ -67,7 +67,6 @@ export class OverlayStack { const placeholder = srcroot?.lastChild as Node // 获取overlay中的内容 const content = closeactiveoverlay.restoreContent as HTMLElement - console.log(content.offsetWidth); // 替换子节点 srcroot?.replaceChild(content, placeholder) const showmenu = document.querySelector('#showmenu') as HTMLElement diff --git a/src/components/ul/ul.ts b/src/components/ul/ul.ts index ebeb22e..65053d3 100644 --- a/src/components/ul/ul.ts +++ b/src/components/ul/ul.ts @@ -116,6 +116,13 @@ export class StarUl extends LitElement { max-width: 88vw; } + :host(#iconmenu) { + width: 320px; + display: block; + margin: 0; + border-radius: 16px; + } + ul { list-style: none; flex-direction: column; diff --git a/src/test/panels/overflowmenu/overflowmenu.ts b/src/test/panels/overflowmenu/overflowmenu.ts index 8f431ba..bc27d84 100644 --- a/src/test/panels/overflowmenu/overflowmenu.ts +++ b/src/test/panels/overflowmenu/overflowmenu.ts @@ -15,26 +15,24 @@ export class PanelOverflowMenu extends LitElement { return html` @@ -52,26 +51,24 @@ export class PanelOverflowMenu extends LitElement { style="position: fixed; top: 50%; left: 50%;" > - + @@ -123,26 +123,24 @@ export class PanelOverflowMenu extends LitElement { style="position: fixed; top: 90%; left: 0;" > @@ -160,26 +159,24 @@ export class PanelOverflowMenu extends LitElement { style="position: fixed; top: 90%; left: 90%;" > @@ -215,6 +213,9 @@ export class PanelOverflowMenu extends LitElement { star-li span.split { color: var(--split-line); } + ::slotted(div) { + border-radius: 16px; + } `, ] }