theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🌀(component): [dropdown]调整菜单样式

Browse Source
This commit is contained in:
sight 2022-09-08 23:49:43 +08:00
parent 71cfa56669
commit 92021b09e9
3 changed files with 24 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
package/component/src/component/dropdown/index.less
View File

@ -3,8 +3,7 @@
display: inline-block; display: inline-block;
} }
.layui-dropdown-content, .layui-dropdown-content {
.layui-dropdown dl {
position: absolute; position: absolute;
z-index: 99999; z-index: 99999;
background-color: #fff; background-color: #fff;
@ -14,32 +13,25 @@
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
} }
.layui-dropdown-content > .layui-dropdown-menu, .layui-dropdown-content > .layui-dropdown-menu {
.layui-dropdown dl > .layui-dropdown-menu {
border-radius: var(--global-border-radius); border-radius: var(--global-border-radius);
margin: 5px 0;
} }
.layui-dropdown-up > dl { .layui-dropdown-content .layui-menu {
display: block;
}
.layui-dropdown-content .layui-menu,
.layui-dropdown .layui-menu {
position: relative; position: relative;
background-color: #fff; background-color: #fff;
} }
.layui-dropdown-content .layui-menu li, .layui-dropdown-content .layui-menu li,
.layui-dropdown-content .layui-menu-body-title a, .layui-dropdown-content .layui-menu-body-title a {
.layui-dropdown .layui-menu li,
.layui-dropdown .layui-menu-body-title a {
padding: 5px 15px; padding: 5px 15px;
} }
.layui-dropdown-content .layui-menu li, .layui-dropdown-content .layui-menu li {
.layui-dropdown .layui-menu li {
position: relative; position: relative;
display: flex; display: flex;
margin: 1px 0;
line-height: 26px; line-height: 26px;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
font-size: 14px; font-size: 14px;
@ -47,13 +39,11 @@
cursor: pointer; cursor: pointer;
} }
.layui-dropdown-content .layui-menu li:hover, .layui-dropdown-content .layui-menu li:hover {
.layui-dropdown .layui-menu li:hover {
background-color: var(--global-neutral-color-2); background-color: var(--global-neutral-color-2);
} }
.layui-dropdown-content .layui-menu-body-title, .layui-dropdown-content .layui-menu-body-title {
.layui-dropdown .layui-menu-body-title {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -69,12 +59,3 @@
.layui-dropdown-content .layui-menu li.layui-disabled:hover { .layui-dropdown-content .layui-menu li.layui-disabled:hover {
background-color: inherit; background-color: inherit;
} }
// fix style
.layui-dropdown-menu .layui-dropdown{
display: block;
width: -moz-available;
width: -webkit-fill-available;
width: fill-available;
width: 100%;
}

31
package/component/src/component/dropdown/index.vue
View File

@ -568,26 +568,23 @@ const { stop: removeTriggerResizeObserver } = useResizeObserver(
} }
); );
onClickOutside( onClickOutside(dropdownRef, (e) => {
dropdownRef, if (
(e) => { !props.clickOutsideToClose ||
if ( !openState.value ||
!props.clickOutsideToClose || dropdownRef.value?.contains(e.target as HTMLElement) ||
!openState.value || contentRef.value?.contains(e.target as HTMLElement)
dropdownRef.value?.contains(e.target as HTMLElement) || ) {
contentRef.value?.contains(e.target as HTMLElement) return;
) { }
for (const item of childrenRefs) {
if (item.value?.contains(e.target as HTMLElement)) {
return; return;
} }
for (const item of childrenRefs) {
if (item.value?.contains(e.target as HTMLElement)) {
return;
}
}
hide();
} }
);
hide();
});
const onlyChildRenderFunc = () => { const onlyChildRenderFunc = () => {
const slotContent = slots.default ? slots.default() : []; const slotContent = slots.default ? slots.default() : [];

2
package/document-component/src/document/zh-CN/components/dropdown.md
View File

@ -385,7 +385,7 @@ export default {
<template #default>刷新</template> <template #default>刷新</template>
<template #suffix><span style="font-size:10px">Ctrl + R</span></template> <template #suffix><span style="font-size:10px">Ctrl + R</span></template>
</lay-dropdown-menu-item> </lay-dropdown-menu-item>
<lay-line margin="0" theme="#EEE"></lay-line> <lay-line margin="5px" theme="#EEE"></lay-line>
<lay-dropdown-menu-item disabled> <lay-dropdown-menu-item disabled>
<template #prefix><lay-icon type="layui-icon-about"></lay-icon></template> <template #prefix><lay-icon type="layui-icon-about"></lay-icon></template>
<template #default>更多</template> <template #default>更多</template>