💄: fix linter
This commit is contained in:
parent
e16c2707f6
commit
5270ba05d1
@ -6,7 +6,7 @@ export default {
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ComputedRef, provide, Ref, ref, watch } from "vue";
|
||||
import { provideLevel} from "./useLevel"
|
||||
import { provideLevel } from "./useLevel";
|
||||
import "./index.less";
|
||||
|
||||
export interface LayMenuProps {
|
||||
@ -39,7 +39,9 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
|
||||
});
|
||||
|
||||
const isTree: ComputedRef<boolean> = computed(() => props.tree);
|
||||
const isCollapse: ComputedRef<boolean | string> = computed(() => props.collapse);
|
||||
const isCollapse: ComputedRef<boolean | string> = computed(
|
||||
() => props.collapse
|
||||
);
|
||||
const isCollapseTransition: ComputedRef = computed(
|
||||
() => props.collapseTransition
|
||||
);
|
||||
|
@ -1,6 +1,15 @@
|
||||
import { computed, inject, provide, reactive, Ref, isRef, ComputedRef, UnwrapNestedRefs } from "vue";
|
||||
import {
|
||||
computed,
|
||||
inject,
|
||||
provide,
|
||||
reactive,
|
||||
Ref,
|
||||
isRef,
|
||||
ComputedRef,
|
||||
UnwrapNestedRefs,
|
||||
} from "vue";
|
||||
|
||||
export const LevelInjectionKey = Symbol("menuLevelKey")
|
||||
export const LevelInjectionKey = Symbol("menuLevelKey");
|
||||
|
||||
export function provideLevel(level: Ref<number> | number) {
|
||||
const computedLevel = computed(() => (isRef(level) ? level.value : level));
|
||||
|
@ -6,7 +6,7 @@ export default {
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ComputedRef, inject, ref, Ref, useSlots } from "vue";
|
||||
import useLevel from '../menu/useLevel';
|
||||
import useLevel from "../menu/useLevel";
|
||||
|
||||
export interface LayMenuItemProps {
|
||||
id: string;
|
||||
@ -23,11 +23,20 @@ const selectHandle = function () {
|
||||
selectedKey.value = props.id;
|
||||
};
|
||||
|
||||
const needTooltip = computed(() => isTree.value && (isCollapse.value === true || isCollapse.value === "true") && level.value === 1);
|
||||
const needTooltip = computed(
|
||||
() =>
|
||||
isTree.value &&
|
||||
(isCollapse.value === true || isCollapse.value === "true") &&
|
||||
level.value === 1
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li class="layui-nav-item" :class="[selectedKey === id ? 'layui-this' : '']" @click="selectHandle()">
|
||||
<li
|
||||
class="layui-nav-item"
|
||||
:class="[selectedKey === id ? 'layui-this' : '']"
|
||||
@click="selectHandle()"
|
||||
>
|
||||
<template v-if="needTooltip">
|
||||
<lay-tooltip position="right">
|
||||
<a href="javascript:void(0)">
|
||||
|
@ -4,12 +4,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
computed,
|
||||
inject,
|
||||
Ref,
|
||||
useSlots,
|
||||
} from "vue";
|
||||
import { computed, inject, Ref, useSlots } from "vue";
|
||||
import LayDropdown from "../dropdown/index.vue";
|
||||
import useLevel from "../menu/useLevel";
|
||||
|
||||
@ -27,19 +22,16 @@ const { level } = useLevel();
|
||||
const isOpen = computed(() => {
|
||||
return openKeys.value.includes(props.id);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li :class="[
|
||||
'layui-nav-item sub-menu-popup',
|
||||
level > 2 ? 'original': '' ,
|
||||
]">
|
||||
<li :class="['layui-nav-item sub-menu-popup', level > 2 ? 'original' : '']">
|
||||
<lay-dropdown
|
||||
trigger="hover"
|
||||
placement="right-top"
|
||||
:autoFitMinWidth="false"
|
||||
:contentOffset="3">
|
||||
:contentOffset="3"
|
||||
>
|
||||
<a href="javascript:void(0)">
|
||||
<!-- 图标 -->
|
||||
<i>
|
||||
@ -63,13 +55,11 @@ const isOpen = computed(() => {
|
||||
</li>
|
||||
</template>
|
||||
<style lang="less">
|
||||
|
||||
|
||||
.sub-menu-popup{
|
||||
.sub-menu-popup {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.sub-menu-popup>.layui-dropdown>div>a {
|
||||
.sub-menu-popup > .layui-dropdown > div > a {
|
||||
width: auto;
|
||||
display: block;
|
||||
text-overflow: clip;
|
||||
@ -82,17 +72,17 @@ const isOpen = computed(() => {
|
||||
padding: 5px 23px 5px 23px;
|
||||
}
|
||||
|
||||
.sub-menu-popup>.layui-dropdown dl {
|
||||
.sub-menu-popup > .layui-dropdown dl {
|
||||
border-radius: 4px;
|
||||
background-color: #393d49;
|
||||
}
|
||||
|
||||
.sub-menu-popup>.layui-dropdown dl>li>a {
|
||||
.sub-menu-popup > .layui-dropdown dl > li > a {
|
||||
span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.layui-nav-item>a {
|
||||
.layui-nav-item > a {
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
@ -108,7 +98,7 @@ const isOpen = computed(() => {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.layui-nav-item>a {
|
||||
.layui-nav-item > a {
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
@ -119,4 +109,3 @@ const isOpen = computed(() => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -19,7 +19,6 @@ import LayTransition from "../transition/index.vue";
|
||||
import SubMenuPopup from "./subMenuPopup.vue";
|
||||
import { provideLevel, default as useLevel } from "../menu/useLevel";
|
||||
|
||||
|
||||
export interface LaySubMenuProps {
|
||||
id: string;
|
||||
title?: string;
|
||||
@ -28,11 +27,13 @@ export interface LaySubMenuProps {
|
||||
const slots = useSlots();
|
||||
const props = defineProps<LaySubMenuProps>();
|
||||
|
||||
const { level } = useLevel()
|
||||
const { level } = useLevel();
|
||||
const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
|
||||
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
|
||||
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
|
||||
const isCollapse: Ref<boolean | string> = inject("isCollapse") as Ref<boolean | string>;
|
||||
const isCollapse: Ref<boolean | string> = inject("isCollapse") as Ref<
|
||||
boolean | string
|
||||
>;
|
||||
const isCollapseTransition: Ref<boolean> = inject(
|
||||
"isCollapseTransition"
|
||||
) as Ref<boolean>;
|
||||
@ -43,13 +44,14 @@ const isOpen = computed(() => {
|
||||
|
||||
const subMenuRef = ref<HTMLElement>();
|
||||
const position = ref<String>();
|
||||
const nextLevel = computed(() =>
|
||||
level.value + 1
|
||||
);
|
||||
const nextLevel = computed(() => level.value + 1);
|
||||
|
||||
provideLevel(nextLevel);
|
||||
|
||||
const computedPopup = computed(() => isTree.value && (isCollapse.value === true || isCollapse.value === "true"));
|
||||
const computedPopup = computed(
|
||||
() =>
|
||||
isTree.value && (isCollapse.value === true || isCollapse.value === "true")
|
||||
);
|
||||
|
||||
watch(isOpen, () => {
|
||||
if (isOpen.value && position.value !== "left-nav") {
|
||||
@ -113,11 +115,14 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
|
||||
<i v-if="slots.expandIcon" class="layui-nav-more">
|
||||
<slot name="expandIcon" :isExpand="isOpen"></slot>
|
||||
</i>
|
||||
<i v-else :class="[
|
||||
isOpen ? 'layui-nav-mored' : '',
|
||||
'layui-icon layui-icon-down',
|
||||
'layui-nav-more',
|
||||
]"></i>
|
||||
<i
|
||||
v-else
|
||||
:class="[
|
||||
isOpen ? 'layui-nav-mored' : '',
|
||||
'layui-icon layui-icon-down',
|
||||
'layui-nav-more',
|
||||
]"
|
||||
></i>
|
||||
</a>
|
||||
<template v-if="isTree">
|
||||
<lay-transition :enable="isCollapseTransition">
|
||||
@ -129,8 +134,11 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
|
||||
</lay-transition>
|
||||
</template>
|
||||
<template v-else>
|
||||
<dl ref="subMenuRef" class="layui-nav-child layui-anim layui-anim-upbit"
|
||||
:class="[{ 'layui-show': isOpen }, position]">
|
||||
<dl
|
||||
ref="subMenuRef"
|
||||
class="layui-nav-child layui-anim layui-anim-upbit"
|
||||
:class="[{ 'layui-show': isOpen }, position]"
|
||||
>
|
||||
<slot></slot>
|
||||
</dl>
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user