🐛(component): [popup-menu]修复悬浮菜单样式
This commit is contained in:
sight
parent
5270ba05d1
commit
afda4aa077
@ -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">
|
||||||
|
|||||||
@ -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">
|
||||||
|
<div>
|
||||||
<!-- 图标 -->
|
<!-- 图标 -->
|
||||||
<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 v-if="$slots.title">
|
||||||
<slot v-if="slots.title" name="title"></slot>
|
<slot name="title"></slot>
|
||||||
</span>
|
</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>
|
||||||
|
<template #content class="layui-sub-menu-popup-content">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</template>
|
</template>
|
||||||
</lay-dropdown>
|
</lay-dropdown>
|
||||||
</li>
|
|
||||||
</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 {
|
||||||
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-size: 12.5px !important;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: 30px;
|
||||||
|
padding: 0;
|
||||||
|
right: -8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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 过渡动画
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user