[新增] Dropdown添加open和hide事件用于进行自定义内容逻辑处理

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

@@ -81,14 +81,15 @@ export default {
 </script>
 
 
+:::
 ::: title 禁用弹出
 :::
 
 ::: demo
 
 <template>
-  <lay-dropdown>
-    <lay-button type="primary" disabled>点击无效</lay-button>
+  <lay-dropdown disabled>
+    <lay-button type="primary" >禁用弹出</lay-button>
     <template #content>
         <lay-dropdown-menu>
           <lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
@@ -111,6 +112,39 @@ export default {
 }
 </script>
 
+
+:::
+::: title 事件处理
+:::
+
+::: demo
+
+<template>
+  <lay-dropdown @open="stat='开启'" @hide="stat='关闭'">
+    <lay-button type="primary" >当前状态:{{stat}}</lay-button>
+    <template #content>
+        <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>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const stat=ref("关闭")
+    return {
+      stat
+    }
+  }
+}
+</script>
+
 :::
 
 ::: title Dropdown 属性
@@ -137,6 +171,17 @@ export default {
 :::
 
  
+::: title Dropdown 事件
+:::
+
+::: table
+
+| 插槽    | 描述     | 参数 |
+| ------- | -------- | ------ |
+| hide | 隐藏下拉内容后触发 | --     |
+| open | 显示下拉内容后触发 | --     |
+
+:::
 
 ::: previousNext dropdown
 :::

src/component/dropdown/index.vue

@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
   trigger: "click",
   disabled: false
 });
-
+const emit = defineEmits(['open', 'hide'])
 const openState = ref(false);
 const dropdownRef = ref<null | HTMLElement>(null);
 
@@ -28,17 +28,24 @@ onClickOutside(dropdownRef, (event) => {
 });
 
 const open = function () {
-  if (props.disabled === false)
+  if (props.disabled === false) {
     openState.value = true;
+    emit('open')
+  }
 };
 
 const hide = function () {
   openState.value = false;
+  emit('hide')
 };
 
 const toggle = function () {
   if (props.disabled === false)
-    openState.value = !openState.value;
+    if (openState.value) {
+      hide()
+    } else {
+      open()
+    }
 };
 
 provide("openState", openState);