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>
<a href="javascript:void(0)">
<i v-if="slots.icon">
<i v-if="slots.icon" class="layui-sub-menu-icon">
<slot name="icon"></slot>
</i>
<span v-if="slots.title">

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

@ -12,8 +12,6 @@ export interface LaySubMenuPopupProps {
id: string;
title?: string;
}
const slots = useSlots();
const props = defineProps<LaySubMenuPopupProps>();
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
@ -25,87 +23,78 @@ const isOpen = computed(() => {
</script>
<template>
<li :class="['layui-nav-item sub-menu-popup', level > 2 ? 'original' : '']">
<lay-dropdown
trigger="hover"
placement="right-top"
:autoFitMinWidth="false"
:contentOffset="3"
>
<a href="javascript:void(0)">
<!-- 图标 -->
<i>
<slot v-if="slots.icon" name="icon"></slot>
</i>
<!-- 标题 -->
<span>
<slot v-if="slots.title" name="title"></slot>
</span>
<lay-dropdown
trigger="hover"
placement="right-top"
:autoFitMinWidth="false"
:contentOffset="3"
class="layui-sub-menu-popup"
>
<li :class="['layui-nav-item']">
<a href="javascript:void(0)" style="justify-content: space-between">
<div>
<!-- 图标 -->
<i v-if="$slots.icon" class="layui-sub-menu-icon">
<slot name="icon"></slot>
</i>
<!-- 标题 -->
<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">
<lay-icon type="layui-icon-right"></lay-icon>
</slot>
</i>
</span>
</a>
<template #content>
<slot></slot>
</template>
</lay-dropdown>
</li>
</li>
<template #content class="layui-sub-menu-popup-content">
<slot></slot>
</template>
</lay-dropdown>
</template>
<style lang="less">
.sub-menu-popup {
line-height: inherit;
}
.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;
// popup-menu 面板样式
.layui-sub-menu-popup.layui-dropdown > dl {
border: unset;
border-radius: 2px;
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 {
span {
display: inline;
}
.layui-sub-menu-icon {
margin-right: 8px;
}
}
.layui-nav-item > a {
text-overflow: clip;
}
span {
display: inline-block;
margin-left: 0;
}
.layui-nav-more {
display: inline-block;
}
}
.layui-nav.layui-nav-collapse .sub-menu-popup.original {
width: 100%;
span {
display: inline;
}
.layui-nav-item > a {
text-overflow: clip;
}
.layui-nav-more {
display: inline-block;
right: 2px;
top: 5.5px;
.layui-nav-more {
position: relative;
display: inline-block;
font-size: 12.5px !important;
margin-top: 0;
margin-left: 30px;
padding: 0;
right: -8px;
}
}
}
</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">
<a href="javascript:void(0)" @click="openHandle()">
<!-- 图标 -->
<i>
<slot v-if="slots.icon" name="icon"></slot>
<i v-if="slots.icon" class="layui-sub-menu-icon">
<slot name="icon"></slot>
</i>
<!-- 标题 -->
<span>
@ -146,11 +146,11 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
</template>
<template v-else>
<SubMenuPopup :id="id">
<template #icon>
<slot v-if="slots.icon" name="icon"></slot>
<template v-if="slots.icon" #icon>
<slot name="icon"></slot>
</template>
<template #title>
<slot v-if="slots.title" name="title"></slot>
<template v-if="slots.title" #title>
<slot name="title"></slot>
</template>
<template #expandIcon>
<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 过渡动画
:::