(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 (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",
};
}
}

View File

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

View File

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

View File

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