✨(component): [dropdown] dropdown-menu-item 新增 disabled 属性
This commit is contained in:
@@ -45,15 +45,18 @@ const getStyle = computed<any>(() => {
|
||||
if (activeIndex === currentIndex) {
|
||||
if (animation === "updown") {
|
||||
return {
|
||||
transform: "translateY(0)", visibility: 'inherit'
|
||||
transform: "translateY(0)",
|
||||
visibility: "inherit",
|
||||
};
|
||||
} else if (animation.includes("fade")) {
|
||||
return {
|
||||
opacity: 1,visibility: 'inherit'
|
||||
opacity: 1,
|
||||
visibility: "inherit",
|
||||
};
|
||||
} else {
|
||||
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 containerRef = computed(() =>
|
||||
props.popupContainer
|
||||
// @ts-ignore
|
||||
? document.querySelector<HTMLElement>(props.popupContainer) ?? document.body
|
||||
props.popupContainer
|
||||
? // @ts-ignore
|
||||
document.querySelector<HTMLElement>(props.popupContainer) ?? document.body
|
||||
: dropdownRef.value
|
||||
) as ComputedRef<HTMLElement>;
|
||||
|
||||
@@ -455,7 +455,7 @@ const handleMouseEnter = (e: MouseEvent) => {
|
||||
};
|
||||
|
||||
const handleMouseEnterWithContext = (e: MouseEvent) => {
|
||||
if (!props.popupContainer){
|
||||
if (!props.popupContainer) {
|
||||
return;
|
||||
}
|
||||
dropdownCtx?.onMouseenter(e);
|
||||
|
||||
@@ -7,9 +7,20 @@ export default {
|
||||
<script setup lang="ts">
|
||||
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 handleClick = () => {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
openState.value = false;
|
||||
};
|
||||
</script>
|
||||
@@ -17,6 +28,7 @@ const handleClick = () => {
|
||||
<template>
|
||||
<li
|
||||
@click="handleClick"
|
||||
:class="{ 'layui-disabled': disabled }"
|
||||
:style="$slots.suffix ? `justify-content: space-between;` : ''"
|
||||
>
|
||||
<span class="layui-menu-body-title">
|
||||
|
||||
@@ -14,14 +14,14 @@ import { DropdownPlacement } from "../dropdown/interface";
|
||||
|
||||
export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
|
||||
|
||||
export interface LayDropdownProps {
|
||||
export interface LayDropdownSubMenuProps {
|
||||
trigger?: DropdownTrigger | DropdownTrigger[];
|
||||
placement?: DropdownPlacement;
|
||||
disabled?: boolean;
|
||||
contentOffset?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayDropdownProps>(), {
|
||||
const props = withDefaults(defineProps<LayDropdownSubMenuProps>(), {
|
||||
trigger: "hover",
|
||||
disabled: false,
|
||||
placement: "right-top",
|
||||
@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
|
||||
:contentOffset="contentOffset"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item :disabled="disabled">
|
||||
<template v-if="$slots.prefix" #prefix>
|
||||
<slot name="prefix" />
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user