openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

TASK #107657 OverflowMenu

This commit is contained in:
yajun 2022-09-08 15:37:29 +08:00
parent aa85d00b2b
commit af2bc8c182
2 changed files with 34 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/overflowmenu/overflowmenu.ts
View File

@ -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 menuheight = this._evenEl[i].getBoundingClientRect().height
const menuwidth = slotelement.getBoundingClientRect().width
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.top = buttontop - menuheight + 'px'
// this._evenEl[i].style.right = bodywidth - buttonright + '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.top = buttonbottom + 'px'
// this._evenEl[i].style.right = bodywidth - buttonright + '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.left = menuleft + 'px'
// this._evenEl[i].style.top = buttontop - menuheight + '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.top = buttonbottom + 'px'
// this._evenEl[i].style.left = menuleft + 'px'
// this._evenEl[i].style.top = buttonbottom + 'px'
return
}
}

56
src/test/panels/overflowmenu/overflowmenu.ts
View File

@ -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
type=${UlType.HEADER_FOOTER}
title="完整栏"
text="可在上栏中填充任意类型的条目"
>
<star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
<star-ul type=${UlType.BASE}>
<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-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
<star-li
type=${LiType.ONLY_LABEL}
label="带跳转的条目"
href="#about"
type=${LiType.ONLY_EDIT}
label="星光麒麟"
default="星光麒麟"
></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-li
type=${LiType.ONLY_EDIT}
label="星光麒麟"
default="星光麒麟"
></star-li>
<star-ul
type=${UlType.ONLY_HEADER}
title="头部有文字"
text="尾部有文字"
>
<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;