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

✨: dropdown 默认渲染至 body

Browse Source
This commit is contained in:
sight 2022-07-20 20:50:44 +08:00
parent 16f9dd30c8
commit 8a0db60bed
7 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,13 +72,15 @@
border-color: #EEEEEE; border-color: #EEEEEE;
} }
.layui-dropdown-content .layui-dropdown{ .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: -moz-available;
width: -webkit-fill-available; width: -webkit-fill-available;
width: fill-available; width: fill-available;
width: 100%; width: 100%;
} }
.layui-dropdown-content .layui-menu li.layui-disabled:hover {
background-color: inherit;
}

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

@ -73,6 +73,7 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
mouseLeaveDelay: 150, mouseLeaveDelay: 150,
focusDelay: 150, focusDelay: 150,
alignPoint: false, alignPoint: false,
popupContainer: "body",
}); });
const childrenRefs = new Set<Ref<HTMLElement>>(); const childrenRefs = new Set<Ref<HTMLElement>>();

1
package/component/src/component/dropdownSubMenu/index.vue
View File

@ -36,6 +36,7 @@ const props = withDefaults(defineProps<LayDropdownSubMenuProps>(), {
:auto-fit-min-width="false" :auto-fit-min-width="false"
:contentOffset="contentOffset" :contentOffset="contentOffset"
:disabled="disabled" :disabled="disabled"
updateAtScroll
> >
<lay-dropdown-menu-item :disabled="disabled"> <lay-dropdown-menu-item :disabled="disabled">
<template v-if="$slots.prefix" #prefix> <template v-if="$slots.prefix" #prefix>

9
package/component/src/component/menu/index.less
View File

@ -367,6 +367,15 @@
.layui-this { .layui-this {
background-color: var(--global-primary-color); background-color: var(--global-primary-color);
} }
// fix style
.layui-dropdown {
display: block;
width: -moz-available;
width: -webkit-fill-available;
width: fill-available;
width: 100%;
}
} }
.layui-sub-menu-popup-theme { .layui-sub-menu-popup-theme {

1
package/component/src/component/subMenu/SubMenuPopup.vue
View File

@ -34,6 +34,7 @@ const isOpen = computed(() => {
:autoFitMinWidth="false" :autoFitMinWidth="false"
:contentOffset="3" :contentOffset="3"
popupContainer="body" popupContainer="body"
updateAtScroll
class="layui-sub-menu-popup" class="layui-sub-menu-popup"
> >
<li :class="['layui-nav-item']"> <li :class="['layui-nav-item']">

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

@ -13,7 +13,7 @@
::: demo ::: demo
<template> <template>
<lay-dropdown> <lay-dropdown updateAtScroll>
<lay-button type="primary">下拉菜单</lay-button> <lay-button type="primary">下拉菜单</lay-button>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>
@ -45,7 +45,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-dropdown trigger="hover"> <lay-dropdown trigger="hover" updateAtScroll>
<lay-button>Hover 触发</lay-button> <lay-button>Hover 触发</lay-button>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>
@ -56,7 +56,7 @@ export default {
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown> <lay-dropdown updateAtScroll>
<lay-button>Click 触发</lay-button> <lay-button>Click 触发</lay-button>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>
@ -67,7 +67,7 @@ export default {
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown trigger="contextMenu"> <lay-dropdown trigger="contextMenu" updateAtScroll>
<lay-button>contextMenu 触发</lay-button> <lay-button>contextMenu 触发</lay-button>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>
@ -78,7 +78,7 @@ export default {
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown trigger="focus"> <lay-dropdown trigger="focus" updateAtScroll>
<lay-input placeholder="Focus 触发"></lay-input> <lay-input placeholder="Focus 触发"></lay-input>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>
@ -89,7 +89,7 @@ export default {
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown :trigger="['hover','focus','click']"> <lay-dropdown :trigger="['hover','focus','click']" updateAtScroll>
<lay-input placeholder="hover focus click"></lay-input> <lay-input placeholder="hover focus click"></lay-input>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>
@ -123,7 +123,7 @@ export default {
<lay-button @click="manualRef.open()">打开</lay-button> <lay-button @click="manualRef.open()">打开</lay-button>
<lay-button @click="manualRef.hide()">关闭</lay-button> <lay-button @click="manualRef.hide()">关闭</lay-button>
<br><br> <br><br>
<lay-dropdown ref="manualRef" :clickOutsideToClose="false" :clickToClose="false"> <lay-dropdown ref="manualRef" :clickOutsideToClose="false" :clickToClose="false" updateAtScroll>
<lay-button type="primary">下拉菜单</lay-button> <lay-button type="primary">下拉菜单</lay-button>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>
@ -222,7 +222,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-dropdown @open="stat='开启'" @hide="stat='关闭'"> <lay-dropdown @open="stat='开启'" @hide="stat='关闭'" updateAtScroll>
<lay-button type="primary" >当前状态:{{stat}}</lay-button> <lay-button type="primary" >当前状态:{{stat}}</lay-button>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>
@ -255,42 +255,42 @@ export default {
::: demo ::: demo
<template> <template>
<lay-dropdown placement="top-left"> <lay-dropdown placement="top-left" updateAtScroll>
<lay-button type="primary">topLeft</lay-button> <lay-button type="primary">topLeft</lay-button>
<template #content> <template #content>
<div style="width:300px;height:200px;"></div> <div style="width:300px;height:200px;"></div>
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown placement="top"> <lay-dropdown placement="top" updateAtScroll>
<lay-button type="primary">top</lay-button> <lay-button type="primary">top</lay-button>
<template #content> <template #content>
<div style="width:300px;height:200px;"></div> <div style="width:300px;height:200px;"></div>
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown placement="top-right"> <lay-dropdown placement="top-right" updateAtScroll>
<lay-button type="primary">topRight</lay-button> <lay-button type="primary">topRight</lay-button>
<template #content> <template #content>
<div style="width:300px;height:200px;"></div> <div style="width:300px;height:200px;"></div>
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown placement="bottom-left"> <lay-dropdown placement="bottom-left" updateAtScroll>
<lay-button type="primary">bottomLeft</lay-button> <lay-button type="primary">bottomLeft</lay-button>
<template #content> <template #content>
<div style="width:300px;height:200px;"></div> <div style="width:300px;height:200px;"></div>
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown placement="bottom"> <lay-dropdown placement="bottom" updateAtScroll>
<lay-button type="primary">bottom</lay-button> <lay-button type="primary">bottom</lay-button>
<template #content> <template #content>
<div style="width:300px;height:200px;"></div> <div style="width:300px;height:200px;"></div>
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown placement="bottom-right"> <lay-dropdown placement="bottom-right" updateAtScroll>
<lay-button type="primary">bottomRight</lay-button> <lay-button type="primary">bottomRight</lay-button>
<template #content> <template #content>
<div style="width:300px;height:200px;"></div> <div style="width:300px;height:200px;"></div>
@ -298,42 +298,42 @@ export default {
</lay-dropdown> </lay-dropdown>
<br><br> <br><br>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown placement="right-top"> <lay-dropdown placement="right-top" updateAtScroll>
<lay-button type="primary">right-top</lay-button> <lay-button type="primary">right-top</lay-button>
<template #content> <template #content>
<div style="width:300px;height:200px;"></div> <div style="width:300px;height:200px;"></div>
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown placement="right"> <lay-dropdown placement="right" updateAtScroll>
<lay-button type="primary">right</lay-button> <lay-button type="primary">right</lay-button>
<template #content> <template #content>
<div style="width:300px;height:200px;"></div> <div style="width:300px;height:200px;"></div>
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown placement="right-bottom"> <lay-dropdown placement="right-bottom" updateAtScroll>
<lay-button type="primary">right-bottom</lay-button> <lay-button type="primary">right-bottom</lay-button>
<template #content> <template #content>
<div style="width:300px;height:200px;"></div> <div style="width:300px;height:200px;"></div>
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown placement="left-top"> <lay-dropdown placement="left-top" updateAtScroll>
<lay-button type="primary">left-top</lay-button> <lay-button type="primary">left-top</lay-button>
<template #content> <template #content>
<div style="width:300px;height:200px;"></div> <div style="width:300px;height:200px;"></div>
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown placement="left"> <lay-dropdown placement="left" updateAtScroll>
<lay-button type="primary">left</lay-button> <lay-button type="primary">left</lay-button>
<template #content> <template #content>
<div style="width:300px;height:200px;"></div> <div style="width:300px;height:200px;"></div>
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown placement="left-bottom"> <lay-dropdown placement="left-bottom" updateAtScroll>
<lay-button type="primary">left-bottom</lay-button> <lay-button type="primary">left-bottom</lay-button>
<template #content> <template #content>
<div style="width:300px;height:200px;"></div> <div style="width:300px;height:200px;"></div>
@ -368,7 +368,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-dropdown> <lay-dropdown updateAtScroll>
<lay-button type="primary">图标菜单</lay-button> <lay-button type="primary">图标菜单</lay-button>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>
@ -413,7 +413,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-dropdown> <lay-dropdown updateAtScroll>
<lay-button type="primary">下拉菜单</lay-button> <lay-button type="primary">下拉菜单</lay-button>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>
@ -435,7 +435,7 @@ export default {
<lay-dropdown-menu-item>菜单3</lay-dropdown-menu-item> <lay-dropdown-menu-item>菜单3</lay-dropdown-menu-item>
</template> </template>
</lay-dropdown-sub-menu> </lay-dropdown-sub-menu>
<lay-dropdown-sub-menu disabled> <lay-dropdown-sub-menu>
<template #default>子菜单四</template> <template #default>子菜单四</template>
<template #content> <template #content>
<lay-dropdown-menu-item>菜单1</lay-dropdown-menu-item> <lay-dropdown-menu-item>菜单1</lay-dropdown-menu-item>
@ -474,7 +474,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-dropdown placement="bottom-left" autoFitWidth> <lay-dropdown placement="bottom-left" autoFitWidth updateAtScroll>
<lay-button type="primary">autoFitWidth</lay-button> <lay-button type="primary">autoFitWidth</lay-button>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>
@ -485,7 +485,7 @@ export default {
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown placement="bottom-left" :autoFitMinWidth="false"> <lay-dropdown placement="bottom-left" :autoFitMinWidth="false" updateAtScroll>
<lay-button type="primary">关闭 autoFitMinWidth</lay-button> <lay-button type="primary">关闭 autoFitMinWidth</lay-button>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>
@ -522,7 +522,7 @@ export default {
<lay-button @click="triggerHeight += 100">改变触发器尺寸</lay-button> <lay-button @click="triggerHeight += 100">改变触发器尺寸</lay-button>
<lay-button @click="contentHeight += 100">改变面板尺寸</lay-button> <lay-button @click="contentHeight += 100">改变面板尺寸</lay-button>
<br><br> <br><br>
<lay-dropdown placement="bottom-left" trigger="focus" :autoFitPosition="true" :autoFixPosition="true" :blurToClose="false" :clickOutsideToClose="false"> <lay-dropdown placement="bottom-left" trigger="focus" :autoFitPosition="true" :autoFixPosition="true" :blurToClose="false" :clickOutsideToClose="false" updateAtScroll>
<lay-input placeholder="autoFixPosition" :style="{height: triggerHeight + 'px'}"></lay-input> <lay-input placeholder="autoFixPosition" :style="{height: triggerHeight + 'px'}"></lay-input>
<template #content> <template #content>
<div :style="{width:'350px', height: contentHeight + 'px'}"></div> <div :style="{width:'350px', height: contentHeight + 'px'}"></div>

6
package/document-component/src/document/zh-CN/components/menu.md
View File

@ -464,6 +464,12 @@ export default {
<lay-menu-item id="5"> <lay-menu-item id="5">
<template #title>菜单一</template> <template #title>菜单一</template>
</lay-menu-item> </lay-menu-item>
<lay-sub-menu>
<template #title>首页</template>
<lay-menu-item id="7">
<template #title>首页</template>
</lay-menu-item>
</lay-sub-menu>
<lay-sub-menu id="6"> <lay-sub-menu id="6">
<template #title>首页</template> <template #title>首页</template>
<lay-menu-item id="7"> <lay-menu-item id="7">