🌀(component): [dropdown]调整菜单样式
This commit is contained in:
parent
71cfa56669
commit
92021b09e9
@ -3,8 +3,7 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layui-dropdown-content,
|
||||
.layui-dropdown dl {
|
||||
.layui-dropdown-content {
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
background-color: #fff;
|
||||
@ -14,32 +13,25 @@
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.layui-dropdown-content > .layui-dropdown-menu,
|
||||
.layui-dropdown dl > .layui-dropdown-menu {
|
||||
.layui-dropdown-content > .layui-dropdown-menu {
|
||||
border-radius: var(--global-border-radius);
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.layui-dropdown-up > dl {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layui-dropdown-content .layui-menu,
|
||||
.layui-dropdown .layui-menu {
|
||||
.layui-dropdown-content .layui-menu {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.layui-dropdown-content .layui-menu li,
|
||||
.layui-dropdown-content .layui-menu-body-title a,
|
||||
.layui-dropdown .layui-menu li,
|
||||
.layui-dropdown .layui-menu-body-title a {
|
||||
.layui-dropdown-content .layui-menu-body-title a {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.layui-dropdown-content .layui-menu li,
|
||||
.layui-dropdown .layui-menu li {
|
||||
.layui-dropdown-content .layui-menu li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: 1px 0;
|
||||
line-height: 26px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-size: 14px;
|
||||
@ -47,13 +39,11 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-dropdown-content .layui-menu li:hover,
|
||||
.layui-dropdown .layui-menu li:hover {
|
||||
.layui-dropdown-content .layui-menu li:hover {
|
||||
background-color: var(--global-neutral-color-2);
|
||||
}
|
||||
|
||||
.layui-dropdown-content .layui-menu-body-title,
|
||||
.layui-dropdown .layui-menu-body-title {
|
||||
.layui-dropdown-content .layui-menu-body-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -69,12 +59,3 @@
|
||||
.layui-dropdown-content .layui-menu li.layui-disabled:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
// fix style
|
||||
.layui-dropdown-menu .layui-dropdown{
|
||||
display: block;
|
||||
width: -moz-available;
|
||||
width: -webkit-fill-available;
|
||||
width: fill-available;
|
||||
width: 100%;
|
||||
}
|
@ -568,26 +568,23 @@ const { stop: removeTriggerResizeObserver } = useResizeObserver(
|
||||
}
|
||||
);
|
||||
|
||||
onClickOutside(
|
||||
dropdownRef,
|
||||
(e) => {
|
||||
if (
|
||||
!props.clickOutsideToClose ||
|
||||
!openState.value ||
|
||||
dropdownRef.value?.contains(e.target as HTMLElement) ||
|
||||
contentRef.value?.contains(e.target as HTMLElement)
|
||||
) {
|
||||
onClickOutside(dropdownRef, (e) => {
|
||||
if (
|
||||
!props.clickOutsideToClose ||
|
||||
!openState.value ||
|
||||
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;
|
||||
}
|
||||
for (const item of childrenRefs) {
|
||||
if (item.value?.contains(e.target as HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
hide();
|
||||
}
|
||||
);
|
||||
|
||||
hide();
|
||||
});
|
||||
|
||||
const onlyChildRenderFunc = () => {
|
||||
const slotContent = slots.default ? slots.default() : [];
|
||||
|
@ -385,7 +385,7 @@ export default {
|
||||
<template #default>刷新</template>
|
||||
<template #suffix><span style="font-size:10px">Ctrl + R</span></template>
|
||||
</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>
|
||||
<template #prefix><lay-icon type="layui-icon-about"></lay-icon></template>
|
||||
<template #default>更多</template>
|
||||
|
Loading…
x
Reference in New Issue
Block a user