✨(dropdown): 修改 context-menu 弹出策略, 仅更改触发不方式, 不影响弹出方案
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -21,27 +21,18 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
|
||||
});
|
||||
|
||||
const openState = ref(false);
|
||||
const dropdownRef = ref<null | HTMLElement>(null);
|
||||
const dropdownRef = ref<null | HTMLElement>();
|
||||
const dropdownX = ref<number | string>(0);
|
||||
const dropdownY = ref<number | string>("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"
|
||||
>
|
||||
<div
|
||||
@click="trigger === 'click' && toggle()"
|
||||
|
||||
Reference in New Issue
Block a user