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>

src/module/selectOption/index.vue

@@ -1,7 +1,7 @@
 <template>
   <dd
     :value="value"
-    :class="[selectItem.value === value ? 'layui-this' : '']"
+    :class="[selectItem.value === value ? 'layui-this' : '',disabled ? 'layui-disabled':'']"
     @click="selectHandle"
   >
     {{ label }}
@@ -10,22 +10,27 @@
 
 <script setup name="LaySelectOption" lang="ts">
 import { SelectItem } from '../type'
-import { defineProps, inject } from 'vue'
+import { defineProps, inject, Ref } from 'vue'
 
 const props = defineProps<{
   value?: string
   label?: string
+  disabled?: boolean
 }>()
 
 const selectItem = inject('selectItem') as SelectItem
+const openState = inject('openState') as Ref<boolean>
 
 const selectHandle = function () {
+  if(props.disabled) {
+    return
+  }
+  openState.value = false
   selectItem.value = props.value
   selectItem.label = props.label
 }
 
 // init selected
-
 if (selectItem.value === props.value) {
   selectItem.value = props.value
   selectItem.label = props.label