docs: 更新文档

src/module/dropdown/index.vue

@@ -5,7 +5,7 @@
     class="layui-dropdown"
     :class="[openState ? 'layui-dropdown-up' : '']"
   >
-    <div @click="open">
+    <div @click="toggle">
       <slot />
     </div>
     <dl class="layui-anim layui-anim-upbit">
@@ -18,10 +18,12 @@
     v-if="trigger === 'hover'"
     class="layui-dropdown"
     :class="[openState ? 'layui-dropdown-up' : '']"
-    @mouseenter="open"
-    @mouseleave="open"
+    @mouseenter="open" 
+    @mouseleave="hide"
   >
-    <slot />
+    <div>
+      <slot />
+    </div>
     <dl class="layui-anim layui-anim-upbit">
       <ul class="layui-menu layui-dropdown-menu">
         <slot name="content" />
@@ -31,7 +33,7 @@
 </template>
 
 <script setup name="LaySelect" lang="ts">
-import { defineProps, ref, watch } from 'vue'
+import { defineProps, provide, ref, watch } from 'vue'
 import useClickOutside from '../../hooks/useClickOutside'
 
 const dropdownRef = ref<null | HTMLElement>(null)
@@ -49,6 +51,14 @@ const props = withDefaults(
 const openState = ref(false)
 
 const open = function () {
+  openState.value = true
+}
+
+const hide = function () {
+  openState.value = false
+}
+
+const toggle = function () {
   openState.value = !openState.value
 }
 
@@ -57,4 +67,6 @@ watch(isClickOutside, () => {
     openState.value = false
   }
 })
+
+provide('openState', openState)
 </script>

src/module/dropdownItem/index.vue

@@ -1,9 +1,17 @@
 <template>
   <li>
-    <div class="layui-menu-body-title">
+    <div class="layui-menu-body-title" @click="click">
       <slot />
     </div>
   </li>
 </template>
 
-<script setup name="LayDropdownItem" lang="ts"></script>
+<script setup name="LayDropdownItem" lang="ts">
+import { inject, Ref } from "vue";
+
+const openState:Ref<boolean> = inject('openState') as Ref<boolean>
+
+const click = function () {
+  openState.value = false
+}
+</script>

src/module/rate/index.vue

@@ -6,46 +6,57 @@
       class="layui-inline"
       @mouseenter="mouseenter(index)"
     >
-      <i class="layui-icon" :class="[rate]" />
+      <i
+        v-if="rate"
+        class="layui-icon layui-icon-rate-solid"
+        :style="{ color: theme }"
+      />
+      <i v-else class="layui-icon layui-icon-rate" :style="{ color: theme }" />
     </li>
   </ul>
 </template>
 <script setup lang="ts">
-import { defineProps, Ref, ref, withDefaults } from 'vue'
+import { defineProps, Ref, ref, watch, withDefaults } from 'vue'
 
-const rates: Ref<Array<string>> = ref([])
+const rates: Ref<Array<boolean>> = ref([])
 
 const props = withDefaults(
   defineProps<{
     length?: number
     modelValue?: number
     character?: string
+    readonly?: boolean
+    theme?: string
   }>(),
   {
     length: 5,
     modelValue: 0,
+    readonly: false,
   }
 )
 
-for (let index = 0; index < props.length; index++) {
-  rates.value.push('layui-icon-rate')
-}
-
-for (let index = props.modelValue - 1; index >= 0; index--) {
-  rates.value[index] = 'layui-icon-rate-solid'
-}
+watch(props, function () {
+  rates.value = []
+  for (let index = 0; index < props.length; index++) {
+    rates.value.push(false)
+  }
+  for (let index = props.modelValue - 1; index >= 0; index--) {
+    rates.value[index] = true
+  }
+},{deep: true, immediate: true})
 
 const emit = defineEmits(['update:modelValue'])
 
 const mouseenter = function (index: number) {
+  if (props.readonly) {
+    return false
+  }
   for (let i = index; i >= 0; i--) {
-    rates.value[i] = 'layui-icon-rate-solid'
+    rates.value[i] = true
   }
-  for (let j = index + 1; j < props.length; j++) {
-    rates.value[j] = 'layui-icon-rate'
+  for (let i = index + 1; i < props.length; i++) {
+    rates.value[i] = false
   }
-
-  // select update 时, 通知 change 事件
   emit('update:modelValue', index + 1)
 }
 </script>