[新增] dropdown 下拉菜单

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

@@ -1,7 +1,41 @@
 ::: demo
 
 <template>
-  <lay-dropdown></lay-dropdown>
+  <lay-dropdown>
+    <lay-button>下拉菜单</lay-button>
+    <template #content>
+    </template>
+  </lay-dropdown>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-dropdown>
+    <lay-button>Hover 触发</lay-button>
+    <template #content>
+    </template>
+  </lay-dropdown>
+  &nbsp;&nbsp;
+    <lay-dropdown>
+    <lay-button>Click 触发</lay-button>
+    <template #content>
+    </template>
+  </lay-dropdown>
 </template>
 
 <script>

docs/src/layouts/Layout.vue

@@ -243,6 +243,11 @@ export default {
         title: '选项卡',
         subTitle: 'tab',
         path: '/zh-CN/components/tab',
+      },{
+        id: 29,
+        title: '图标选择',
+        subTitle: 'iconPicker',
+        path: '/zh-CN/components/iconPicker',
       },
     ]
 

docs/src/router/zh-CN.ts

@@ -16,7 +16,7 @@ const zhCN = [
         path: '/zh-CN/guide/install',
         component: () => import('../../docs/zh-CN/guide/install.md'),
         meta: { title: '安装' },
-      },      {
+      }, {
         path: '/zh-CN/guide/changelog',
         component: () => import('../../docs/zh-CN/guide/changelog.md'),
         meta: { title: '更新' },
@@ -60,7 +60,7 @@ const zhCN = [
         path: '/zh-CN/components/panel',
         component: () => import('../../docs/zh-CN/components/panel.md'),
         meta: { title: '面板' },
-      },{
+      }, {
         path: '/zh-CN/components/animation',
         component: () => import('../../docs/zh-CN/components/animation.md'),
         meta: { title: '动画' },
@@ -136,14 +136,18 @@ const zhCN = [
         path: '/zh-CN/components/rate',
         component: () => import('../../docs/zh-CN/components/rate.md'),
         meta: { title: '评分' },
-      },{
+      }, {
         path: '/zh-CN/components/dropdown',
         component: () => import('../../docs/zh-CN/components/dropdown.md'),
         meta: { title: '下拉' },
-      },{
+      }, {
         path: '/zh-CN/components/tab',
         component: () => import('../../docs/zh-CN/components/tab.md'),
         meta: { title: '选项卡' },
+      }, {
+        path: '/zh-CN/components/iconPicker',
+        component: () => import('../../docs/zh-CN/components/iconPicker.md'),
+        meta: { title: '图标选择' },
       }
     ],
   },

docs/src/styles/markdown.css

@@ -127,16 +127,6 @@ img {
   max-width: 100%;
 }
 
-ul,
-ol {
-  padding-left: 1.25em;
-}
-
-li > ul,
-li > ol {
-  margin: 0;
-}
-
 form {
   margin: 0;
 }

src/css/layui-vue.css

@@ -1,63 +0,0 @@
-.layui-avatar {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    color: #000000d9;
-    font-size: 14px;
-    font-variant: tabular-nums;
-    line-height: 1.5715;
-    list-style: none;
-    font-feature-settings: tnum;
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    color: #fff;
-    white-space: nowrap;
-    text-align: center;
-    vertical-align: middle;
-    background: #ccc;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    border-radius: 4px;
-}
-
-.layui-avatar.layui-avatar-radius {
-    border-radius: 50%;
-}
-
-.layui-avatar.layui-avatar-sm {
-    height: 30px;
-    width: 30px;
-}
-
-.layui-avatar.layui-avatar-lg {
-    height: 36px;
-    width: 36px;
-}
-
-.layui-avatar.layui-avatar-xs {
-    height: 28px;
-    width: 28px;
-}
-
-.layui-empty{
-    margin: 0 8px;
-    font-size: 14px;
-    line-height: 22px;
-    text-align: center;
-}
-
-.layui-empty-image{
-    height: 100px;
-    margin-bottom: 8px;
-}
-
-.layui-empty-image img {
-    height: 100%;
-    margin: auto;
-}
-
-.layui-empty-description{
-    margin: 0;
-}

src/css/layui.css

@@ -4404,27 +4404,28 @@ body .layui-table-tips .layui-layer-content {
 }
 
 .layui-dropdown {
-	position: absolute;
+	position: relative;
-	left: -999999px;
+	display: inline-block;
-	top: -999999px;
-	z-index: 66666666;
-	margin: 5px 0;
-	min-width: 100px
 }
 
-.layui-dropdown:before {
+.layui-dropdown dl {
-	content: "";
+	display: none;
 	position: absolute;
-	width: 100%;
-	height: 6px;
 	left: 0;
-	top: -6px
+	top: 42px;
+	padding: 5px 0;
+	z-index: 899;
+	min-width: 100%;
+	border: 1px solid #eee;
+	max-height: 300px;
+	overflow-y: auto;
+	background-color: #fff;
+	border-radius: 2px;
+	box-sizing: border-box
 }
 
-.layui-dropdown .layui-none {
+.layui-dropdown-up dl {
-	line-height: 26px;
+	display: block
-	color: #999;
-	text-align: center
 }
 
 .layui-iconpicker {
@@ -6293,6 +6294,70 @@ body .layui-util-face .layui-layer-content {
 	color: #999
 }
 
+.layui-avatar {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: #000000d9;
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5715;
+    list-style: none;
+    font-feature-settings: tnum;
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    color: #fff;
+    white-space: nowrap;
+    text-align: center;
+    vertical-align: middle;
+    background: #ccc;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    border-radius: 4px;
+}
+
+.layui-avatar.layui-avatar-radius {
+    border-radius: 50%;
+}
+
+.layui-avatar.layui-avatar-sm {
+    height: 30px;
+    width: 30px;
+}
+
+.layui-avatar.layui-avatar-lg {
+    height: 36px;
+    width: 36px;
+}
+
+.layui-avatar.layui-avatar-xs {
+    height: 28px;
+    width: 28px;
+}
+
+.layui-empty{
+    margin: 0 8px;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+}
+
+.layui-empty-image{
+    height: 100px;
+    margin-bottom: 8px;
+}
+
+.layui-empty-image img {
+    height: 100%;
+    margin: auto;
+}
+
+.layui-empty-description{
+    margin: 0;
+}
+
 .layui-anim {
 	-webkit-animation-duration: .3s;
 	-webkit-animation-fill-mode: both;

src/index.ts

@@ -2,7 +2,6 @@ import type { App } from 'vue'
 import type { IDefineComponent, InstallOptions } from './module/type/index'
 
 import "./css/layui.css"
-import "./css/layui-vue.css"
 import LayAvatar from './module/avatar/index'
 import LayRadio from './module/radio/index'
 import LayButton from './module/button/index'

src/module/dropdown/index.vue

@@ -1,7 +1,23 @@
 <template>
-    <div>下拉菜单</div>
+  <div class="layui-dropdown" @click="open" :class="[openState?'layui-dropdown-up':'']">
+    <slot></slot>
+    <dl class="layui-anim layui-anim-upbit">
+      <slot name="content"></slot>
+    </dl>
+  </div>
 </template>
 
-<script setup name="LayDropdown" lang="ts">
+<script setup name="LaySelect" lang="ts">
+import { defineProps, ref } from 'vue'
 
+const props =
+  defineProps<{
+    trigger?: string
+  }>()
+
+const openState = ref(false)
+
+const open = function() {
+    openState.value = !openState.value
+}
 </script>