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

🐛(component): [popup-menu]修复悬浮菜单样式

Browse Source
This commit is contained in:
sight 2022-07-01 18:03:42 +08:00
parent 5270ba05d1
commit afda4aa077
4 changed files with 229 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/src/component/menuItem/index.vue
View File

@ -54,7 +54,7 @@ const needTooltip = computed(
<template v-else> <template v-else>
<a href="javascript:void(0)"> <a href="javascript:void(0)">
<i v-if="slots.icon"> <i v-if="slots.icon" class="layui-sub-menu-icon">
<slot name="icon"></slot> <slot name="icon"></slot>
</i> </i>
<span v-if="slots.title"> <span v-if="slots.title">

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

@ -12,8 +12,6 @@ export interface LaySubMenuPopupProps {
id: string; id: string;
title?: string; title?: string;
} }
const slots = useSlots();
const props = defineProps<LaySubMenuPopupProps>(); const props = defineProps<LaySubMenuPopupProps>();
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>; const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
@ -25,87 +23,78 @@ const isOpen = computed(() => {
</script> </script>
<template> <template>
<li :class="['layui-nav-item sub-menu-popup', level > 2 ? 'original' : '']"> <lay-dropdown
<lay-dropdown trigger="hover"
trigger="hover" placement="right-top"
placement="right-top" :autoFitMinWidth="false"
:autoFitMinWidth="false" :contentOffset="3"
:contentOffset="3" class="layui-sub-menu-popup"
> >
<a href="javascript:void(0)"> <li :class="['layui-nav-item']">
<!-- 图标 --> <a href="javascript:void(0)" style="justify-content: space-between">
<i> <div>
<slot v-if="slots.icon" name="icon"></slot> <!-- 图标 -->
</i> <i v-if="$slots.icon" class="layui-sub-menu-icon">
<!-- 标题 --> <slot name="icon"></slot>
<span> </i>
<slot v-if="slots.title" name="title"></slot>
</span> <!-- 标题 -->
<span v-if="$slots.title">
<slot name="title"></slot>
</span>
</div>
<!-- 扩展 --> <!-- 扩展 -->
<i v-if="slots.expandIcon" class="layui-nav-more"> <span v-if="$slots.expandIcon" class="layui-nav-more">
<slot name="expandIcon"> <slot name="expandIcon">
<lay-icon type="layui-icon-right"></lay-icon> <lay-icon type="layui-icon-right"></lay-icon>
</slot> </slot>
</i> </span>
</a> </a>
<template #content> </li>
<slot></slot> <template #content class="layui-sub-menu-popup-content">
</template> <slot></slot>
</lay-dropdown> </template>
</li> </lay-dropdown>
</template> </template>
<style lang="less"> <style lang="less">
.sub-menu-popup { // popup-menu 面板样式
line-height: inherit; .layui-sub-menu-popup.layui-dropdown > dl {
} border: unset;
border-radius: 2px;
.sub-menu-popup > .layui-dropdown > div > a {
width: auto;
display: block;
text-overflow: clip;
height: 40px;
line-height: 40px;
position: relative;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 5px 23px 5px 23px;
}
.sub-menu-popup > .layui-dropdown dl {
border-radius: 4px;
background-color: #393d49; background-color: #393d49;
} }
// popup-menu item样式
.layui-nav.layui-nav-collapse {
.layui-sub-menu-popup dl .layui-nav-item {
width: auto;
> a {
display: flex;
align-items: center;
text-overflow: ellipsis;
padding: 5px 20px 5px 20px;
// height: 35px;
// width: 95px;
.sub-menu-popup > .layui-dropdown dl > li > a { .layui-sub-menu-icon {
span { margin-right: 8px;
display: inline; }
} }
.layui-nav-item > a { span {
text-overflow: clip; display: inline-block;
} margin-left: 0;
}
.layui-nav-more { .layui-nav-more {
display: inline-block; position: relative;
} display: inline-block;
} font-size: 12.5px !important;
margin-top: 0;
.layui-nav.layui-nav-collapse .sub-menu-popup.original { margin-left: 30px;
width: 100%; padding: 0;
right: -8px;
span { }
display: inline;
}
.layui-nav-item > a {
text-overflow: clip;
}
.layui-nav-more {
display: inline-block;
right: 2px;
top: 5.5px;
} }
} }
</style> </style>

12
package/component/src/component/subMenu/index.vue
View File

@ -104,8 +104,8 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="javascript:void(0)" @click="openHandle()"> <a href="javascript:void(0)" @click="openHandle()">
<!-- 图标 --> <!-- 图标 -->
<i> <i v-if="slots.icon" class="layui-sub-menu-icon">
<slot v-if="slots.icon" name="icon"></slot> <slot name="icon"></slot>
</i> </i>
<!-- 标题 --> <!-- 标题 -->
<span> <span>
@ -146,11 +146,11 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
</template> </template>
<template v-else> <template v-else>
<SubMenuPopup :id="id"> <SubMenuPopup :id="id">
<template #icon> <template v-if="slots.icon" #icon>
<slot v-if="slots.icon" name="icon"></slot> <slot name="icon"></slot>
</template> </template>
<template #title> <template v-if="slots.title" #title>
<slot v-if="slots.title" name="title"></slot> <slot name="title"></slot>
</template> </template>
<template #expandIcon> <template #expandIcon>
<slot v-if="slots.expandIcon" name="expandIcon"></slot> <slot v-if="slots.expandIcon" name="expandIcon"></slot>

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

@ -423,6 +423,168 @@ export default {
::: :::
::: title 悬浮菜单
:::
::: demo
<template>
<lay-switch v-model="collapse20"></lay-switch>
<br/>
<br/>
<lay-menu v-model:selectedKey="selectedKey20" v-model:tree="isTree20" v-model:openKeys="openKeys20" :collapse="collapse20">
<lay-menu-item id="1">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="2">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu title="目录" id="3">
<template #icon><lay-icon type="layui-icon-home"></lay-icon></template>
<template #title>首页</template>
<lay-menu-item id="4">
<template #title>首页</template>
</lay-menu-item>
<lay-menu-item id="5">
<template #title>菜单一</template>
</lay-menu-item>
<lay-sub-menu id="6">
<template #title>首页</template>
<lay-menu-item id="7">
<template #title>首页</template>
</lay-menu-item>
<lay-menu-item id="8">
<template #title>首页</template>
</lay-menu-item>
<lay-sub-menu id="9">
<template #title>首页</template>
<lay-menu-item id="10">
<template #title>首页</template>
</lay-menu-item>
<lay-menu-item id="11">
<template #title>首页</template>
</lay-menu-item>
<lay-menu-item id="12">
<template #title>首页</template>
</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-sub-menu>
<lay-sub-menu title="目录" id="13">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="14">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="15">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu id="16">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="17">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="18">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu id="19">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="20">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="21">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="22">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const selectedKey20 = ref("5")
const openKeys20 = ref(["7"])
const collapse20 = ref(true)
const isTree20 = ref(true)
return {
selectedKey,
openKeys6,
colapse,
isTree
}
}
}
</script>
:::
::: title 过渡动画 ::: title 过渡动画
::: :::