[新增] select 组件

src/module/select/index.vue

@@ -1,35 +1,30 @@
 <template>
-  <select name="city" lay-verify="required">
-    <option value=""></option>
-    <option value="0">北京</option>
-    <option value="1">上海</option>
-    <option value="2">广州</option>
-    <option value="3">深圳</option>
-    <option value="4">杭州</option>
+  <select :name="name" lay-verify="required">
   </select>
   <div class="layui-unselect layui-form-select" @click="open" :class="[openState?'layui-form-selected':'']">
     <div class="layui-select-title">
       <input
         type="text"
         placeholder="请选择"
-        value=""
+        :value="selectItem.label"
         readonly=""
         class="layui-input layui-unselect"
       /><i class="layui-edge"></i>
     </div>
     <dl class="layui-anim layui-anim-upbit" style="">
-      <dd lay-value="" class="layui-select-tips">请选择</dd>
+      <dd lay-value="" @click="clean"  class="layui-select-tips">请选择</dd>
       <slot></slot>
     </dl>
   </div>
 </template>
 
 <script setup name="LaySelect" lang="ts">
-import { defineProps, ref } from 'vue'
+import { defineProps, provide, reactive, ref, watch } from 'vue'
 
 const props =
   defineProps<{
     modelValue?: string
+    name?: string
   }>()
 
 const openState = ref(false)
@@ -37,4 +32,21 @@ const openState = ref(false)
 const open = function() {
     openState.value = !openState.value
 }
+
+const selectItem = reactive({label:"",value:props.modelValue});
+
+provide("selectItem",selectItem);
+
+// select update 时, 通知 change 事件
+const emit = defineEmits(['update:modelValue'])
+
+watch(selectItem, function(item) {
+  emit('update:modelValue', item.value)
+})
+
+const clean = function() {
+  selectItem.value = "";
+  selectItem.label = "";
+}
+
 </script>