perf(select): 新增 select 下拉选择 change 事件, disabled 禁用状态

src/module/select/index.vue

@@ -1,21 +1,20 @@
 <template>
-  <select :name="name" lay-verify="required" />
   <div
+    ref="selectRef"
     class="layui-unselect layui-form-select"
     :class="[openState ? 'layui-form-selected' : '']"
-    @click="open"
   >
-    <div class="layui-select-title">
+    <div class="layui-select-title" @click="open">
       <input
         type="text"
         placeholder="请选择"
         :value="selectItem.label"
         readonly=""
+        :name="name"
         class="layui-input layui-unselect"
       /><i class="layui-edge" />
     </div>
-    <dl class="layui-anim layui-anim-upbit" style="">
-      <dd lay-value="" class="layui-select-tips" @click="clean">请选择</dd>
+    <dl class="layui-anim layui-anim-upbit">
       <slot />
     </dl>
   </div>
@@ -23,6 +22,16 @@
 
 <script setup name="LaySelect" lang="ts">
 import { defineProps, provide, reactive, ref, watch } from 'vue'
+import useClickOutside from '../../use/useClickOutside'
+
+const selectRef = ref<null | HTMLElement>(null)
+const isClickOutside = useClickOutside(selectRef)
+
+watch(isClickOutside, () => {
+  if (isClickOutside.value) {
+    openState.value = false
+  }
+})
 
 const props = defineProps<{
   modelValue?: string
@@ -32,22 +41,19 @@ const props = defineProps<{
 const openState = ref(false)
 
 const open = function () {
-  openState.value = !openState.value
+  openState.value = true
 }
 
 const selectItem = reactive({ label: '', value: props.modelValue })
 
 provide('selectItem', selectItem)
+provide('openState', openState)
 
 // select update 时, 通知 change 事件
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue','change'])
 
 watch(selectItem, function (item) {
+  emit('change', item.value)
   emit('update:modelValue', item.value)
 })
-
-const clean = function () {
-  selectItem.value = ''
-  selectItem.label = ''
-}
 </script>