diff --git a/src/components/overflowmenu/README.md b/src/components/overflowmenu/README.md index d929b63..c72978f 100644 --- a/src/components/overflowmenu/README.md +++ b/src/components/overflowmenu/README.md @@ -2,34 +2,28 @@ ## 介绍 -overflowmenu:溢出菜单。 +### overflowmenu:溢出菜单。 -属性介绍: -1. size:组件显示大小,分为四种类型:small、medium、large和extralarge,默认为medium。 - -2. type:组件类型,包括:仅图标:onlyicon;图标和标签:iconlabel - -3. disabled:禁用状态,默认为false - -4. icon:用于传递图标类型 - -5. label:标签名 - -6. (暂定) - -## 需求 -1. 自定义颜色用以外部控制,如: --test-color:XXX p{color: --test-color} -2. 弹出菜单时的越界判断 +## 新需求(主页面要求——罗 9.5) +1. 外部颜色控制(思路:使用自定义css样式,如: --test-color:XXX p{color: --test-color},通过修改自定义css样式的值达到从外部修改组件颜色) +2. 弹出菜单时的越界判断,包括主、副屏切换时的图标定位以及旋转屏幕时的定位 思路: (1)首先获取button在屏幕显示的left、right、top和bottom值以及menu的width和height (2)对于右侧边界:right >= width ? true则menu的left = button的left : false则menu的right = button的right (3)对于下边界:bottom >= height ? true则menu的top = button的bottom : false则menu的bottom = button的top -3. 外部控制接口,事件还是属性? -4. 主、副屏的图标定位 -5. 弹出的菜单绑定在父节点上以供调用,减少重复使用 -6. 鼠标点击其他位置后菜单自动收缩 +3. 外部控制接口,事件还是属性(暂定) +4. 弹出的菜单绑定在父节点上以供调用,减少重复使用(思路:后续通过overlay组件实现) -## 问题 -1. 首次点击最右侧的按钮是获取到的菜单宽度和高度与实际不符: -2. 点击空白处无法关闭菜单栏 +## 问题(9.6) +1. 首次点击最右侧的按钮是获取到的菜单宽度和高度与实际不符:(该问题已消失,但不知道为何消失) +2. 点击空白处无法关闭菜单栏(解决方法:将点击事件绑定在父容器中) + + +## 新要求:(9.7) +(1)将不需要修改的“var”变量声明变成“const”(已修改) +(2)变量命名要直观且有解释(已修改变量命名规范并添加对应注释) +(3)点击一个按钮后其余按钮应关闭(方法同(1)) +(4)可以将slot增加名称从而将div以删除 +(5)定位方式修改为相对定位,将将fixed改为relative,达到适应效果 +(6)控制菜单栏宽度,菜单栏中star-ul中的ul标签负责扩充大小,修改其width值 \ No newline at end of file diff --git a/src/components/overflowmenu/overflowmenu.ts b/src/components/overflowmenu/overflowmenu.ts index 3b3aa7a..83dcc96 100644 --- a/src/components/overflowmenu/overflowmenu.ts +++ b/src/components/overflowmenu/overflowmenu.ts @@ -53,28 +53,19 @@ export class StarOverflowMenu extends LitElement { 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 = 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' 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' slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px' return } else { // 正常情况 - // this._evenEl[i].style.left = menuleft + 'px' - // this._evenEl[i].style.top = buttonbottom + 'px' return } }