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

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

@@ -73,3 +73,11 @@ export default {
 | Name   | Description | Accepted Values  |
 | ------- | -------- | --------------- |
 | trigger | 触发方式 | `click` `hover` |
+
+::: field Dropdown 插槽
+:::
+
+| Name   | Description | Accepted Values  |
+| ------- | -------- | --------------- |
+| content | 下拉内容 | -- |
+

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

@@ -1,8 +1,13 @@
+::: field 基础使用
+:::
+
 ::: demo
 
 <template>
   <lay-select>
-  
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="2" label="编码"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
   </lay-select>
 </template>
 
@@ -18,4 +23,64 @@ export default {
 }
 </script>
 
-:::
+:::
+
+::: field 选择禁用
+:::
+
+::: demo
+
+<template>
+  <lay-select v-model="selected">
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="2" label="编码" disabled="true"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+  </lay-select>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const selected = ref('1')
+
+    return {
+      selected
+    }
+  }
+}
+</script>
+
+:::
+
+::: field select 属性
+:::
+
+| Name   | Description | Accepted Values  |
+| -------- | ---- | ----------------------- | 
+| name      | 原生 name 属性 | --   | 
+| v-model     | 选中值 | --  | 
+
+::: field select-option 属性
+:::
+
+| Name   | Description | Accepted Values  |
+| -------- | ---- | ----------------------- | 
+| label      | 标签 | --   | 
+| value     | 值 | --  | 
+
+::: field select-option 插槽
+:::
+
+| Name   | Description | Accepted Values  |
+| -------- | ---- | ----------------------- | 
+| default      | 默认 | --   | 
+
+::: field select 事件
+:::
+
+| Name   | Description | Accepted Values  |
+| -------- | ---- | ----------------------- | 
+| change      | 切换事件 | value   | 

docs/docs/zh-CN/guide/changelog.md

@@ -7,6 +7,8 @@
 <lay-timeline-item title="0.1.8">
 [新增] table 表格 size 属性, 提供不同尺寸。<br>
 [新增] transfer 穿梭框 item 插槽, 允许自定义列表项。<br>
+[新增] select 下拉选择 change 事件, 值变动触发回调。<br>
+[新增] select-option 下拉选择项 disabled 属性, 允许可选项禁用。<br>
 [修复] transfer 穿梭框 切换 逻辑。<br>
 [删除] dropdown 下拉菜单 padding 样式。<br>
 </lay-timeline-item>

docs/src/layouts/Layout.vue

@@ -322,6 +322,12 @@ export default {
         subTitle: 'carousel',
         path: '/zh-CN/components/carousel',
       },
+      {
+        id: 39,
+        title: '下拉选择',
+        subTitle: 'select',
+        path: '/zh-CN/components/select',
+      },
     ]
 
     const selected = ref(1)

docs/src/router/zh-CN.ts

@@ -214,6 +214,10 @@ const zhCN = [
         path: '/zh-CN/components/carousel',
         component: () => import('../../docs/zh-CN/components/carousel.md'),
         meta: { title: '轮播' },
+      },{
+        path: '/zh-CN/components/select',
+        component: () => import('../../docs/zh-CN/components/select.md'),
+        meta: { title: '下拉选择' },
       },
     ],
   },

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