From 262fb12e288a328f18129c427ffad014268e2b82 Mon Sep 17 00:00:00 2001
From: castleiMac <castle@tansuyun.cn>
Date: Sun, 3 Apr 2022 19:29:49 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20select=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81create?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/select.md | 40 +++++++++++++++++++++++++
 src/component/select/index.vue          | 12 ++++++--
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/example/docs/zh-CN/components/select.md b/example/docs/zh-CN/components/select.md
index 6433675f..5e2ac081 100644
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@@ -188,6 +188,44 @@ export default {
 </script>
 
 
+:::
+
+::: title 传入create属性和接收create事件用于开启创建子项功能
+:::
+
+::: demo
+
+<template>
+  <lay-select v-model="selected" :items="items" :create="true"  @create="createEvent">
+  </lay-select>
+  当前元素: {{items.map(o=>o.label).join()}}
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const selected = ref('1');
+    const items=ref([
+      {label:'选项1',value:'1',keyword:'选项xuanxiang1'},
+      {label:'选项2',value:2,keyword:'选项xuanxiang2'},
+      {label:'选项3',value:3,keyword:'选项xuanxiang3',disabled:true},
+    ]);
+    function createEvent(v){
+      items.value.push({
+        label:v,
+        value:items.value.length
+      })
+    }
+    return {
+      selected,items,createEvent
+    }
+  }
+}
+</script>
+
+
 :::
 
 ::: title 海量数据 
@@ -283,6 +321,7 @@ export default {
 | disabled     | 是否禁用              | `boolean`                  | `true` `false` | `false` |
 | showEmpty    | 是否增加空提示选项     | `boolean`                  | `true` `false` | `true` |
 | multiple     | 是否为多选            | `boolean`                  | `true` `false` | `false` |
+| create       | 是否允许创建            | `boolean`                  | `true` `false` | `false` |
 
 
 :::
@@ -296,6 +335,7 @@ export default {
 | ------ | ---------- | --------------- |
 | change | 切换事件    | value           |
 | search | 关键词变化事件    | 用户输入的关键词 string           |
+| create | 允许创建情况下的创建回调事件    | 用户输入的关键词 string           |
 
 :::
 
diff --git a/src/component/select/index.vue b/src/component/select/index.vue
index 680fda97..f5472caa 100644
--- a/src/component/select/index.vue
+++ b/src/component/select/index.vue
@@ -29,6 +29,7 @@ export interface LaySelectProps {
   showEmpty?: boolean;
   emptyMessage?: string;
   multiple?: boolean;
+  create?: boolean;
   items?: { label: string, value: string | number | [] | null, key: string }[]
 }
 
@@ -44,6 +45,7 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
   disabled: false,
   showEmpty: true,
   multiple: false,
+  create: false
 });
 
 const openState = ref(false);
@@ -55,9 +57,10 @@ const open = function () {
     return;
   }
   openState.value = !openState.value;
+  console.log(props.create)
 };
 
-const emit = defineEmits(["update:modelValue", "change", 'search']);
+const emit = defineEmits(["update:modelValue", "change", 'search', 'create']);
 const selectItem = ref<SelectItem>({
   value: !props.multiple
     ? props.modelValue
@@ -114,7 +117,7 @@ const value = computed({
       : null
   }
 })
-const selectItemHandle = function (
+const selectItemHandle = async function (
   _selectItem: SelectItem,
   isChecked?: boolean
 ) {
@@ -230,9 +233,12 @@ provide("keyword", txt)
 
     <!-- 下拉内容 -->
     <dl class="layui-anim layui-anim-upbit">
-      <template v-if="!multiple && showEmpty">
+      <template v-if="!multiple && showEmpty && !props.create">
         <lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
       </template>
+      <template v-if="props.create">
+        <dd @click="emit('create', txt)">{{ txt }}</dd>
+      </template>
       <template v-if="props.items">
         <lay-select-option
           v-for="(v, k) in props.items"