🐛(component): [popup-menu]修复悬浮菜单样式
This commit is contained in:
sight
parent
5270ba05d1
commit
afda4aa077
@ -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">
|
||||
|
||||
@ -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"
|
||||
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>
|
||||
<slot v-if="slots.icon" name="icon"></slot>
|
||||
<i v-if="$slots.icon" class="layui-sub-menu-icon">
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
|
||||
<!-- 标题 -->
|
||||
<span>
|
||||
<slot v-if="slots.title" name="title"></slot>
|
||||
<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>
|
||||
</li>
|
||||
<template #content class="layui-sub-menu-popup-content">
|
||||
<slot></slot>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</li>
|
||||
</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 {
|
||||
position: relative;
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 过渡动画
|
||||
:::
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user