chore: 拆分 dropdown 为 dropdown 与 dropdown-menu

This commit is contained in:
就眠儀式
2022-03-19 13:02:52 +08:00
parent d0f3b9dd70
commit d4b4afcc0e
13 changed files with 98 additions and 39 deletions

View File

@@ -17,7 +17,8 @@
}
.layui-dropdown dl > .layui-dropdown-menu {
border: 1px solid @global-neutral-color-3;
border: 1px solid #e4e7ed;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
border-radius: @global-border-radius;
}

View File

@@ -44,34 +44,17 @@ defineExpose({ open, hide, toggle });
<template>
<div
v-if="trigger === 'click'"
ref="dropdownRef"
class="layui-dropdown"
:class="[openState ? 'layui-dropdown-up' : '']"
@mouseenter="trigger === 'hover' && open()"
@mouseleave="trigger === 'hover' && hide()"
:class="{'layui-dropdown-up' : openState}"
>
<div @click="toggle">
<div @click="trigger === 'click' && toggle()">
<slot></slot>
</div>
<dl class="layui-anim layui-anim-upbit">
<ul class="layui-menu layui-dropdown-menu">
<slot name="content"></slot>
</ul>
</dl>
</div>
<div
v-if="trigger === 'hover'"
class="layui-dropdown"
:class="[openState ? 'layui-dropdown-up' : '']"
@mouseenter="open"
@mouseleave="hide"
>
<div>
<slot></slot>
</div>
<dl class="layui-anim layui-anim-upbit">
<ul class="layui-menu layui-dropdown-menu">
<slot name="content"></slot>
</ul>
<slot name="content"></slot>
</dl>
</div>
</template>