✨(component): [dropdown] dropdown-menu-item 新增 disabled 属性
This commit is contained in:
parent
1753c9e04c
commit
6fc3dc44f8
@ -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",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
@ -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">
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user