From 7873134d81488fdceff5680fb3abe8661caa3528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Fri, 17 Dec 2021 00:07:15 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=20icon-picker?=
 =?UTF-8?q?=20=E9=80=89=E6=8B=A9=E5=9B=BE=E6=A0=87=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/guide/changelog.md |  1 +
 src/module/dropdown/index.vue         | 87 +++++++++++++++------------
 src/module/iconPicker/index.vue       | 21 ++++---
 3 files changed, 60 insertions(+), 49 deletions(-)

diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index c6e6bcd1..7558dbaf 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -22,6 +22,7 @@
           <li>[新增] layer 组件 resize 属性, 开启弹层尺寸拉伸, 常用于 页面层 与 Iframe 层。</li>
           <li>[加强] layer 组件 area 属性, 支持 字符串 与 数组 类型, 默认 auto 宽高根据内容自适应。</li>
           <li>[修复] layer 组件 body 禁用拖动, 仅支持标题拖动窗体。</li>
+          <li>[修复] dropdown 组件触发方式为 hover 时，移动不到菜单子项的问题</li>
           <li>[集成] utteranc.es 插件, 基于 issues 提供为文档提供留言能力。</li>
           <li>[升级] layer-vue 1.2.0, 更稳定的 layer 版本。</li>
           <li>[升级] vue 3.2.26 版本。</li>
diff --git a/src/module/dropdown/index.vue b/src/module/dropdown/index.vue
index 4eded2f2..8271c843 100644
--- a/src/module/dropdown/index.vue
+++ b/src/module/dropdown/index.vue
@@ -1,3 +1,49 @@
+<script lang="ts">
+export default {
+  name: "LayDropdown"
+}
+</script>
+
+<script setup lang="ts">
+import { defineProps, provide, ref, watch } from 'vue'
+import { useClickOutside } from '@layui/hooks-vue'
+
+const dropdownRef = ref<null | HTMLElement>(null)
+const isClickOutside = useClickOutside(dropdownRef)
+
+export interface LayDropdownProps {
+    trigger?: string
+}
+
+const props = withDefaults(defineProps<LayDropdownProps>(),{
+    trigger: 'click',
+})
+
+const openState = ref(false)
+
+const open = function () {
+  openState.value = true
+}
+
+const hide = function () {
+  openState.value = false
+}
+
+const toggle = function () {
+  openState.value = !openState.value
+}
+
+watch(isClickOutside, () => {
+  if (isClickOutside.value) {
+    openState.value = false
+  }
+})
+
+provide('openState', openState)
+
+defineExpose({ open, hide, toggle });
+</script>
+
 <template>
   <div
     v-if="trigger === 'click'"
@@ -30,43 +76,4 @@
       </ul>
     </dl>
   </div>
-</template>
-
-<script setup name="LaySelect" lang="ts">
-import { defineProps, provide, ref, watch } from 'vue'
-import { useClickOutside } from '@layui/hooks-vue'
-
-const dropdownRef = ref<null | HTMLElement>(null)
-const isClickOutside = useClickOutside(dropdownRef)
-
-const props = withDefaults(
-  defineProps<{
-    trigger?: string
-  }>(),
-  {
-    trigger: 'click',
-  }
-)
-
-const openState = ref(false)
-
-const open = function () {
-  openState.value = true
-}
-
-const hide = function () {
-  openState.value = false
-}
-
-const toggle = function () {
-  openState.value = !openState.value
-}
-
-watch(isClickOutside, () => {
-  if (isClickOutside.value) {
-    openState.value = false
-  }
-})
-
-provide('openState', openState)
-</script>
+</template>
\ No newline at end of file
diff --git a/src/module/iconPicker/index.vue b/src/module/iconPicker/index.vue
index d58d6143..b7b4afec 100644
--- a/src/module/iconPicker/index.vue
+++ b/src/module/iconPicker/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <lay-dropdown>
+  <lay-dropdown ref="dropdownRef">
     <div
       class="
         layui-inline layui-border-box layui-iconpicker layui-iconpicker-split
@@ -85,17 +85,18 @@
 import { defineProps, Ref, ref } from 'vue'
 import { LayIconList as icons } from "@layui/icons-vue"
 
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string
-    page?: boolean
+export interface LayIconPickerProps {
+    page?: boolean,
+    modelValue?: string,
     showSearch?: boolean
-  }>(),
-  {
+}
+
+const props = withDefaults(defineProps<LayIconPickerProps>(),{
     modelValue: 'layui-icon-face-smile',
     page: false,
-  }
-)
+})
+
+const dropdownRef = ref<null | HTMLElement>(null);
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -104,6 +105,8 @@ const selectedIcon: Ref<string> = ref(props.modelValue as string)
 const selectIcon = function (icon: string) {
   emit('update:modelValue', icon)
   selectedIcon.value = icon
+  // @ts-ignore
+  dropdownRef.value.hide()
 }
 
 const icones: Ref = ref([])