TASK #107657 OverflowMenu-删除无用console
This commit is contained in:
parent
af2bc8c182
commit
09352e1aff
|
@ -2,34 +2,28 @@
|
||||||
|
|
||||||
## 介绍
|
## 介绍
|
||||||
|
|
||||||
overflowmenu:溢出菜单。
|
### overflowmenu:溢出菜单。
|
||||||
|
|
||||||
属性介绍:
|
## 新需求(主页面要求——罗 9.5)
|
||||||
1. size:组件显示大小,分为四种类型:small、medium、large和extralarge,默认为medium。
|
1. 外部颜色控制(思路:使用自定义css样式,如: --test-color:XXX p{color: --test-color},通过修改自定义css样式的值达到从外部修改组件颜色)
|
||||||
|
2. 弹出菜单时的越界判断,包括主、副屏切换时的图标定位以及旋转屏幕时的定位
|
||||||
2. type:组件类型,包括:仅图标:onlyicon;图标和标签:iconlabel
|
|
||||||
|
|
||||||
3. disabled:禁用状态,默认为false
|
|
||||||
|
|
||||||
4. icon:用于传递图标类型
|
|
||||||
|
|
||||||
5. label:标签名
|
|
||||||
|
|
||||||
6. (暂定)
|
|
||||||
|
|
||||||
## 需求
|
|
||||||
1. 自定义颜色用以外部控制,如: --test-color:XXX 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值
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue