TASK #107657 OverflowMenu-删除无用console

This commit is contained in:
yajun 2022-09-08 15:48:30 +08:00
parent af2bc8c182
commit 09352e1aff
2 changed files with 18 additions and 33 deletions

View File

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

View File

@ -53,28 +53,19 @@ export class StarOverflowMenu extends LitElement {
const bottomline = (buttonbottom + menuheight > bodyheight)?true:false const bottomline = (buttonbottom + menuheight > bodyheight)?true:false
// 右下角边界 // 右下角边界
if (rightline && bottomline) { 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.left = -(menuwidth - (buttonright - buttonleft)) + 'px'
slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px' slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px'
return return
} else if (rightline) { } 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' slotelement.style.right = menuwidth - (buttonright - buttonleft) + 'px'
return return
} else if (bottomline) { } 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' slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px'
return return
} else { } else {
// 正常情况 // 正常情况
// this._evenEl[i].style.left = menuleft + 'px'
// this._evenEl[i].style.top = buttonbottom + 'px'
return return
} }
} }