(component): [dropdown] dropdown-menu-item 新增 disabled 属性

This commit is contained in:
sight 2022-07-05 12:30:48 +08:00
parent 1753c9e04c
commit 6fc3dc44f8
6 changed files with 36 additions and 12 deletions

View File

@ -45,15 +45,18 @@ const getStyle = computed<any>(() => {
if (activeIndex === currentIndex) { if (activeIndex === currentIndex) {
if (animation === "updown") { if (animation === "updown") {
return { return {
transform: "translateY(0)", visibility: 'inherit' transform: "translateY(0)",
visibility: "inherit",
}; };
} else if (animation.includes("fade")) { } else if (animation.includes("fade")) {
return { return {
opacity: 1,visibility: 'inherit' opacity: 1,
visibility: "inherit",
}; };
} else { } else {
return { return {
transform: "translateX(0)",visibility: 'inherit' transform: "translateX(0)",
visibility: "inherit",
}; };
} }
} }

View File

@ -85,9 +85,9 @@ const { x: mouseLeft, y: mouseTop } = useMouse();
const openState = ref(false); const openState = ref(false);
const containerRef = computed(() => const containerRef = computed(() =>
props.popupContainer props.popupContainer
// @ts-ignore ? // @ts-ignore
? document.querySelector<HTMLElement>(props.popupContainer) ?? document.body document.querySelector<HTMLElement>(props.popupContainer) ?? document.body
: dropdownRef.value : dropdownRef.value
) as ComputedRef<HTMLElement>; ) as ComputedRef<HTMLElement>;
@ -455,7 +455,7 @@ const handleMouseEnter = (e: MouseEvent) => {
}; };
const handleMouseEnterWithContext = (e: MouseEvent) => { const handleMouseEnterWithContext = (e: MouseEvent) => {
if (!props.popupContainer){ if (!props.popupContainer) {
return; return;
} }
dropdownCtx?.onMouseenter(e); dropdownCtx?.onMouseenter(e);

View File

@ -7,9 +7,20 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import { inject, Ref } from "vue"; import { inject, Ref } from "vue";
export interface LayDropdownMenuItemProps {
disabled?: boolean;
}
const props = withDefaults(defineProps<LayDropdownMenuItemProps>(), {
disabled: false,
});
const openState: Ref<boolean> = inject("openState") as Ref<boolean>; const openState: Ref<boolean> = inject("openState") as Ref<boolean>;
const handleClick = () => { const handleClick = () => {
if (props.disabled) {
return;
}
openState.value = false; openState.value = false;
}; };
</script> </script>
@ -17,6 +28,7 @@ const handleClick = () => {
<template> <template>
<li <li
@click="handleClick" @click="handleClick"
:class="{ 'layui-disabled': disabled }"
:style="$slots.suffix ? `justify-content: space-between;` : ''" :style="$slots.suffix ? `justify-content: space-between;` : ''"
> >
<span class="layui-menu-body-title"> <span class="layui-menu-body-title">

View File

@ -14,14 +14,14 @@ import { DropdownPlacement } from "../dropdown/interface";
export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu"; export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
export interface LayDropdownProps { export interface LayDropdownSubMenuProps {
trigger?: DropdownTrigger | DropdownTrigger[]; trigger?: DropdownTrigger | DropdownTrigger[];
placement?: DropdownPlacement; placement?: DropdownPlacement;
disabled?: boolean; disabled?: boolean;
contentOffset?: number; contentOffset?: number;
} }
const props = withDefaults(defineProps<LayDropdownProps>(), { const props = withDefaults(defineProps<LayDropdownSubMenuProps>(), {
trigger: "hover", trigger: "hover",
disabled: false, disabled: false,
placement: "right-top", placement: "right-top",
@ -37,7 +37,7 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
:contentOffset="contentOffset" :contentOffset="contentOffset"
:disabled="disabled" :disabled="disabled"
> >
<lay-dropdown-menu-item> <lay-dropdown-menu-item :disabled="disabled">
<template v-if="$slots.prefix" #prefix> <template v-if="$slots.prefix" #prefix>
<slot name="prefix" /> <slot name="prefix" />
</template> </template>

View File

@ -383,7 +383,7 @@ export default {
<template #suffix><span style="font-size:10px">Ctrl + R</span></template> <template #suffix><span style="font-size:10px">Ctrl + R</span></template>
</lay-dropdown-menu-item> </lay-dropdown-menu-item>
<lay-line></lay-line> <lay-line></lay-line>
<lay-dropdown-menu-item> <lay-dropdown-menu-item disabled>
<template #prefix><lay-icon type="layui-icon-about"></lay-icon></template> <template #prefix><lay-icon type="layui-icon-about"></lay-icon></template>
<template #default>更多</template> <template #default>更多</template>
<template #suffix><lay-icon type="layui-icon-right"></lay-icon></template> <template #suffix><lay-icon type="layui-icon-right"></lay-icon></template>
@ -425,7 +425,7 @@ export default {
<template #prefix><lay-icon type="layui-icon-set-sm"></lay-icon></template> <template #prefix><lay-icon type="layui-icon-set-sm"></lay-icon></template>
<template #default>选项二</template> <template #default>选项二</template>
<template #content> <template #content>
<lay-dropdown-menu-item>子菜单一</lay-dropdown-menu-item> <lay-dropdown-menu-item disabled>子菜单一</lay-dropdown-menu-item>
<lay-dropdown-menu-item>子菜单二</lay-dropdown-menu-item> <lay-dropdown-menu-item>子菜单二</lay-dropdown-menu-item>
<lay-dropdown-sub-menu> <lay-dropdown-sub-menu>
<template #default>子菜单三</template> <template #default>子菜单三</template>
@ -435,6 +435,14 @@ export default {
<lay-dropdown-menu-item>菜单3</lay-dropdown-menu-item> <lay-dropdown-menu-item>菜单3</lay-dropdown-menu-item>
</template> </template>
</lay-dropdown-sub-menu> </lay-dropdown-sub-menu>
<lay-dropdown-sub-menu disabled>
<template #default>子菜单四</template>
<template #content>
<lay-dropdown-menu-item>菜单1</lay-dropdown-menu-item>
<lay-dropdown-menu-item>菜单2</lay-dropdown-menu-item>
<lay-dropdown-menu-item>菜单3</lay-dropdown-menu-item>
</template>
</lay-dropdown-sub-menu>
</template> </template>
</lay-dropdown-sub-menu> </lay-dropdown-sub-menu>
<lay-dropdown-menu-item> <lay-dropdown-menu-item>

View File

@ -16,6 +16,7 @@
<li> <li>
<h3>1.2.7 <span class="layui-badge-rim">2022-07-04</span></h3> <h3>1.2.7 <span class="layui-badge-rim">2022-07-04</span></h3>
<ul> <ul>
<li>[新增] dropdown-menu-item 新增 disabled 属性。by @starsatdawn</li>
<li>[修复] table默认加载时有横向滚动条header 的滚动条占位无法显示 by @dingyongya</li> <li>[修复] table默认加载时有横向滚动条header 的滚动条占位无法显示 by @dingyongya</li>
<li>[优化] carousel首次加载时不应存在动画效果而是应立即显示默认的item by @0o张不歪o0</li> <li>[优化] carousel首次加载时不应存在动画效果而是应立即显示默认的item by @0o张不歪o0</li>
</ul> </ul>