[新增] menu 菜单组件

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

@@ -0,0 +1 @@
+下拉菜单案例

docs/src/layouts/Layout.vue

@@ -85,6 +85,7 @@ export default {
       { id: 24, title: '字段',subTitle:"field" ,path: '/zh-CN/components/field' },
       { id: 25, title: '空',subTitle:"empty" ,path: '/zh-CN/components/empty' },
       { id: 26, title: '评分',subTitle:"rate" ,path: '/zh-CN/components/rate' },
+      { id: 27, title: '下拉', subTitle: "dropdown", path: '/zh-CN/components/dropdown'}
     ]
 
     const selected = ref(1)

docs/src/router/zh-CN.ts

@@ -136,6 +136,10 @@ 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: '下拉' },
       }
     ],
   },

src/index.ts

@@ -45,6 +45,7 @@ import LayScroll from './module/scroll/index'
 import LayEmpty from './module/empty/index'
 import LayFormItem from './module/formItem/index'
 import LayRate from './module/rate/index'
+import LayDropdown from './module/dropdown/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -88,7 +89,8 @@ const components: Record<string, IDefineComponent> = {
   LaySelectOption,
   LayEmpty,
   LayFormItem,
-  LayRate
+  LayRate,
+  LayDropdown
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -146,6 +148,7 @@ export {
   LayEmpty,
   LayFormItem,
   LayRate,
+  LayDropdown,
   install,
 }
 

src/module/dropdown/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+  app.component(Component.name || 'LayDropdown', Component)
+}
+
+export default Component as IDefineComponent

src/module/dropdown/index.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>下拉菜单</div>
+</template>
+
+<script setup name="LayDropdown" lang="ts">
+
+</script>

src/module/menuItem/index.vue

@@ -1,10 +1,10 @@
 <template>
   <li class="layui-nav-item">
-    <a href="">{{ title }} </a>
+    <a href="javascript:void(0)">{{ title }} </a>
   </li>
 
-  <li class="layui-nav-item" v-if="slots.default">
+  <li class="layui-nav-item" :class="[isOpen?'layui-nav-itemed':'']" v-if="slots.default">
-    <a href="">
+    <a href="javascript:void(0)" @click="openHandle">
       {{ title }}
       <i class="layui-icon layui-icon-down layui-nav-more"></i>
     </a>
@@ -15,11 +15,18 @@
 </template>
 
 <script setup name="LayMenuItem" lang="ts">
-import { defineProps, useSlots } from 'vue'
+import { defineProps, ref, useSlots } from 'vue'
 const slots = useSlots()
 
 const props =
   defineProps<{
     title: string
 }>()
+
+const isOpen = ref(false)
+
+const openHandle = function() {
+  isOpen.value = !isOpen.value
+}
+
 </script>