chore: 拆分 dropdown 为 dropdown 与 dropdown-menu

example/docs/zh-CN/components/dropdown.md

@@ -16,9 +16,11 @@
   <lay-dropdown>
     <lay-button type="primary">下拉菜单</lay-button>
     <template #content>
-        <lay-dropdown-item>选项一</lay-dropdown-item>
-        <lay-dropdown-item>选项二</lay-dropdown-item>
-        <lay-dropdown-item>选项三</lay-dropdown-item>
+        <lay-dropdown-menu>
+          <lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
+        </lay-dropdown-menu>
     </template>
   </lay-dropdown>
 </template>
@@ -46,18 +48,22 @@ export default {
   <lay-dropdown trigger="hover">
     <lay-button>Hover 触发</lay-button>
     <template #content>
-        <lay-dropdown-item>选项一</lay-dropdown-item>
-        <lay-dropdown-item>选项二</lay-dropdown-item>
-        <lay-dropdown-item>选项三</lay-dropdown-item>
+        <lay-dropdown-menu>
+          <lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
+        </lay-dropdown-menu>
     </template>
   </lay-dropdown>
   &nbsp;&nbsp;
     <lay-dropdown>
     <lay-button>Click 触发</lay-button>
     <template #content>
-        <lay-dropdown-item>选项一</lay-dropdown-item>
-        <lay-dropdown-item>选项二</lay-dropdown-item>
-        <lay-dropdown-item>选项三</lay-dropdown-item>
+        <lay-dropdown-menu>
+          <lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
+        </lay-dropdown-menu>
     </template>
   </lay-dropdown>
 </template>

example/docs/zh-CN/components/select.md

@@ -98,6 +98,49 @@ export default {
 
 :::
 
+::: title 海量数据 
+:::
+
+::: demo
+
+<template>
+  <lay-select v-model="selected">
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+  </lay-select>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const selected = ref('1')
+
+    return {
+      selected
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 多选使用
 :::
 

example/docs/zh-CN/guide/changelog.md

@@ -21,6 +21,7 @@
           <li>[新增] table 表格组件 excel 导出工具栏。</li>
           <li>[新增] table column 选项 sort 属性, 开启字段排序。</li>
           <li>[新增] page 分页组件 v-model 属性, 支持默认页设置。</li>
+          <li>[新增] dropdown-menu 与 dropdown-menu-item 下拉菜单组件。</li>
           <li>[新增] date-picker 日期选择组件, 支持年月, 日期, 时间。</li>
           <li>[新增] transfer 穿梭框组件 showSearch 开启搜索属性。</li>
           <li>[修复] carousel-item 轮播项使用 v-for 无法渲染。</li>

src/component/dropdown/index.less

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

src/component/dropdown/index.vue

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

src/component/dropdownMenu/index.vue

@@ -0,0 +1,11 @@
+<template>
+    <ul class="layui-menu layui-dropdown-menu">
+        <slot></slot>
+    </ul>
+</template>
+
+<script lang="ts">
+export default {
+    name: "LayDropdownMenu"
+}
+</script>

src/component/dropdownMenuItem/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/dropdownMenuItem/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 export default {
-  name: "LayDropdownItem",
+  name: "LayDropdownMenuItem",
 };
 </script>
 

src/component/iconPicker/index.vue

@@ -197,4 +197,4 @@ const searchList = function (str: string, container: any) {
       </div>
     </template>
   </lay-dropdown>
-</template>
+</template>

src/component/select/index.vue

@@ -17,6 +17,7 @@ import {
   toRefs,
   Ref,
 } from "vue";
+import LayScroll from "../scroll";
 import { onClickOutside } from "@vueuse/core";
 import { SelectItem } from "../../types";
 
@@ -141,8 +142,8 @@ const selectItemPush = function (p: SelectItem) {
   }
 };
 provide("selectItemHandle", selectItemHandle);
-provide("selectItem", selectItem);
 provide("selectItemPush", selectItemPush);
+provide("selectItem", selectItem);
 </script>
 
 <template>
@@ -210,12 +211,14 @@ provide("selectItemPush", selectItemPush);
         </div>
       </div>
     </div>
+    
+    <!-- 下拉内容 -->
     <dl class="layui-anim layui-anim-upbit">
-      <!-- 多选不支持空提示 -->
       <template v-if="!multiple && showEmpty">
         <lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
       </template>
       <slot></slot>
     </dl>
+
   </div>
 </template>

src/index.ts

@@ -54,7 +54,8 @@ import LayEmpty from "./component/empty/index";
 import LayFormItem from "./component/formItem/index";
 import LayRate from "./component/rate/index";
 import LayDropdown from "./component/dropdown/index";
-import LayDropdownItem from "./component/dropdownItem/index";
+import LayDropdownMenu from "./component/dropdownMenu/index";
+import LayDropdownMenuItem from "./component/dropdownMenuItem/index";
 import LayTab from "./component/tab/index";
 import LayTabItem from "./component/tabItem/index";
 import LayTree from "./component/tree/index";
@@ -129,7 +130,8 @@ const components: Record<string, Component> = {
   LayFormItem,
   LayRate,
   LayDropdown,
-  LayDropdownItem,
+  LayDropdownMenu,
+  LayDropdownMenuItem,
   LayTab,
   LayTabItem,
   LayIconPicker,
@@ -214,7 +216,8 @@ export {
   LayFormItem,
   LayRate,
   LayDropdown,
-  LayDropdownItem,
+  LayDropdownMenu, 
+  LayDropdownMenuItem,
   LayTab,
   LayTabItem,
   LayIconPicker,