💄: fix linter

This commit is contained in:
sight 2022-06-30 22:10:06 +08:00
parent e16c2707f6
commit 5270ba05d1
6 changed files with 62 additions and 45 deletions

View File

@ -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
);

View File

@ -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));

View File

@ -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)">

View File

@ -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>

View File

@ -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>