[新增] select 组件

docs/docs/zh-CN/components/form.md

@@ -198,9 +198,9 @@ export default {
 
 <template>
   <lay-form>
-    <lay-select>
-      <lay-select-option>北京</lay-select-option>
-      <lay-select-option>济南</lay-select-option>
+    <lay-select v-model="select">
+      <lay-select-option value="beijing" label="北京"></lay-select-option>
+      <lay-select-option value="jinan" label="济南"></lay-select-option>
     </lay-select>
   </lay-form>
 </template>
@@ -211,7 +211,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+    const select = ref("jinan")
+
     return {
+      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>

src/module/selectOption/index.vue

@@ -1,14 +1,31 @@
 <template>
-    <dd :value="value">
-        <slot></slot>
+    <dd :value="value" @click="selectHandle" :class="[selectItem.value === value?'layui-this':'']">
+        {{label}}
     </dd>
 </template>
 
 <script setup name="LaySelectOption" lang="ts">
-import { defineProps } from 'vue'
+import { SelectItem } from '../type'
+import { defineProps, inject } from 'vue'
 
 const props =
   defineProps<{
     value?: string
+    label?: string
   }>()
+
+const selectItem = inject("selectItem") as SelectItem
+
+const selectHandle = function(){
+  selectItem.value = props.value
+  selectItem.label = props.label
+}
+
+// init selected
+
+if(selectItem.value === props.value) {
+  selectItem.value = props.value
+  selectItem.label = props.label
+}
+
 </script>

src/module/type/index.ts

@@ -1 +1,2 @@
 export * from './public'
+export * from './select'

src/module/type/select.ts

@@ -0,0 +1,4 @@
+export interface SelectItem {
+    label?: String,
+    value?: String
+}