From 1718e32735e9b2fe9cb1f8ecf4bd68718c74255e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com> Date: Tue, 7 Jun 2022 20:26:03 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(dropdown):=20=E4=BF=AE=E6=94=B9=20con?= =?UTF-8?q?text-menu=20=E5=BC=B9=E5=87=BA=E7=AD=96=E7=95=A5,=20=E4=BB=85?= =?UTF-8?q?=E6=9B=B4=E6=94=B9=E8=A7=A6=E5=8F=91=E4=B8=8D=E6=96=B9=E5=BC=8F?= =?UTF-8?q?,=20=E4=B8=8D=E5=BD=B1=E5=93=8D=E5=BC=B9=E5=87=BA=E6=96=B9?= =?UTF-8?q?=E6=A1=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/component/dropdown/index.less | 3 -- .../src/component/dropdown/index.vue | 23 +++------------ .../src/document/zh-CN/components/dropdown.md | 28 +++++++++++++++++++ package/document/src/layouts/Layout.vue | 28 ++++++++++--------- package/document/src/plugin/highlight.ts | 2 +- package/document/src/router/index.ts | 1 - 6 files changed, 48 insertions(+), 37 deletions(-) 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 @@