diff --git a/package/component/src/component/dropdown/index.less b/package/component/src/component/dropdown/index.less index bdc5e70f..ebed5ae6 100644 --- a/package/component/src/component/dropdown/index.less +++ b/package/component/src/component/dropdown/index.less @@ -6,8 +6,6 @@ .layui-dropdown dl { display: none; position: absolute; - left: var(--layui-dropdown-left); - top: var(--layui-dropdown-top); margin-top: 2px; z-index: 899; min-width: 100%; @@ -26,7 +24,6 @@ display: block; } - .layui-dropdown .layui-menu { position: relative; background-color: #fff; diff --git a/package/component/src/component/dropdown/index.vue b/package/component/src/component/dropdown/index.vue index 58315e2a..f5a221d5 100644 --- a/package/component/src/component/dropdown/index.vue +++ b/package/component/src/component/dropdown/index.vue @@ -21,27 +21,18 @@ const props = withDefaults(defineProps(), { }); const openState = ref(false); -const dropdownRef = ref(null); +const dropdownRef = ref(); const dropdownX = ref(0); const dropdownY = ref("auto"); const emit = defineEmits(["open", "hide"]); -// @ts-ignore -onClickOutside(dropdownRef, (event) => { + +onClickOutside(dropdownRef, () => { openState.value = false; }); const open = function (event?: Event): void { if (props.disabled === false) { - if (event) { - const el = event.currentTarget; - // @ts-ignore - const rect = el.getBoundingClientRect(); - // @ts-ignore - dropdownX.value = event.clientX - rect.left + "px"; - // @ts-ignore - dropdownY.value = event.clientY - rect.top + "px"; - } - + openState.value = true; emit("open"); } @@ -61,11 +52,6 @@ const toggle = function (event?: Event): void { } }; -const dropdownStyle = computed(() => ({ - "--layui-dropdown-left": dropdownX.value, - "--layui-dropdown-top": dropdownY.value, -})); - provide("openState", openState); defineExpose({ open, hide, toggle }); @@ -78,7 +64,6 @@ defineExpose({ open, hide, toggle }); @mouseenter="trigger === 'hover' && open()" @mouseleave="trigger === 'hover' && hide()" :class="{ 'layui-dropdown-up': openState }" - :style="dropdownStyle" >
+ + 下拉菜单 + + + + + + +::: + ::: title Dropdown 属性 ::: diff --git a/package/document/src/layouts/Layout.vue b/package/document/src/layouts/Layout.vue index 70bb3b6e..0162f701 100644 --- a/package/document/src/layouts/Layout.vue +++ b/package/document/src/layouts/Layout.vue @@ -76,27 +76,27 @@