✨(component): 进一步完善 autoComplete

sleeprite · sleeprite · commit aef3fd1d6814 · 2023-03-12T03:05:49.000+08:00
diff --git a/package/component/src/component/autoComplete/index.vue b/package/component/src/component/autoComplete/index.vue
@@ -4,97 +4,151 @@
       <lay-input
         :name="name"
         :model-value="innerValue"
-        :placeholder="placeholder"
         :allow-clear="allowClear"
+        :placeholder="placeholder"
+        @click="clickHandler"
         @input="inputHandler"
+        @blur="blurHandler"
+        @focus="focusHandler"
+        @compositionstart="onCompositionstart"
+        @compositionend="onCompositionend"
       ></lay-input>
       <template #content>
         <template v-if="innerOptions.length > 0">
           <lay-dropdown-menu>
             <template v-for="(option, index) in innerOptions">
               <lay-dropdown-menu-item
-                class="lay-autocomplete-option"
-                :class="{
+                @click="clickOptions(option)"
+                :class="['lay-autocomplete-option', {
                   selected: selectedIndex == index,
                   equals: innerValue == option,
-                }"
+                }]"
               >
                 {{ option }}
               </lay-dropdown-menu-item>
             </template>
           </lay-dropdown-menu>
         </template>
-        <template v-else>
-          <div class="lay-autocomplete-empty">暂无内容</div>
-        </template>
       </template>
     </lay-dropdown>
   </div>
 </template>
 
 <script lang="ts">
 export default {
-  name: "LayAutoComplete",
+  name: "LayAutocomplete",
 };
 </script>
 
 <script lang="ts" setup>
-import { ref, watch, reactive, onMounted, onUnmounted } from "vue";
+import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
 
-export interface AvatarProps {
-  modalValue?: string;
-  options?: string[];
+export interface AutocompleteProps {
+  modelValue: string;
+  fetchSuggestions: Function;
   placeholder?: string;
   allowClear?: boolean;
   name?: string;
 }
 
-const props = withDefaults(defineProps<AvatarProps>(), {});
+const props = withDefaults(defineProps<AutocompleteProps>(), {});
+
+interface AutocompleteEmits {
+  (e: "update:modelValue", value: string): void;
+}
+
+const emits = defineEmits<AutocompleteEmits>();
 
-const innerValue = ref(props.modalValue);
-const innerOptions = reactive<string[]>([]);
+const isFocus = ref(false);
+const innerValue = ref(props.modelValue);
+const innerOptions = ref<string[]>([]);
+const selectedIndex = ref(-1);
 const dropdownRef = ref();
-const selectedIndex = ref();
+const composing = ref(false);
+
+const onCompositionstart = () => {
+  composing.value = true;
+};
+
+const onCompositionend = (eventParam: Event) => {
+  composing.value = false;
+  inputHandler((eventParam.target as HTMLInputElement).value);
+};
 
 watch(
-  () => props.modalValue,
+  () => props.modelValue,
   () => {
-    innerValue.value = props.modalValue;
+    innerValue.value = props.modelValue;
   }
 );
 
 const inputHandler = function (value: string) {
-  innerValue.value = value;
-  dropdownRef.value.show();
+  if (!composing.value) {
+    emits("update:modelValue", value);
+    props.fetchSuggestions(value).then((suggestions: any[]) => {
+      innerOptions.value = suggestions || [];
+    })
+  }
 };
 
-watch([innerValue, props.options], () => {
-  innerOptions.splice(0);
-  props.options?.forEach((option) => {
-    if (innerValue.value && option.indexOf(innerValue.value) != -1) {
-      innerOptions.push(option);
-    }
+const clickHandler = function () {
+  nextTick(() => {
+    dropdownRef.value.hide();
   });
-  if (innerOptions.length > 0) {
-    selectedIndex.value = 0;
+};
+
+const clickOptions = function (value: string) {
+  innerValue.value = value;
+}
+
+const blurHandler = function () {
+  isFocus.value = false;
+};
+
+const focusHandler = function () {
+  isFocus.value = true;
+};
+
+watch([innerValue, innerOptions], () => {
+  let isEquals = false;
+  if (innerValue.value != undefined && innerValue.value != "") {
+    innerOptions.value.forEach((option, index) => {
+      if (innerValue.value === option) {
+        selectedIndex.value = index;
+        isEquals = true;
+      }
+    });
+  }
+  if (isEquals === false) {
+    selectedIndex.value = -1;
   }
 });
 
+watch(innerOptions, () => {
+  if(innerOptions.value.length > 0) {
+    dropdownRef.value.show();
+  } else {
+    dropdownRef.value.hide();
+  }
+})
+
 onMounted(() => {
   document.addEventListener("keyup", function (e) {
-    if (e.key === "ArrowUp") {
-      if (selectedIndex.value > 0) {
-        selectedIndex.value = selectedIndex.value - 1;
+    if (isFocus.value === true) {
+      if (e.key === "ArrowDown") {
+        if (selectedIndex.value <= innerOptions.value.length - 2) {
+          selectedIndex.value++;
+        }
       }
-    }
-    if (e.key === "ArrowDown") {
-      if (selectedIndex.value <= innerOptions.length - 2) {
-        selectedIndex.value = selectedIndex.value + 1;
+      if (e.key === "ArrowUp") {
+        if (selectedIndex.value > 0) {
+          selectedIndex.value--;
+        }
+      }
+      if (e.key === "Enter") {
+        innerValue.value = innerOptions.value[selectedIndex.value];
+        dropdownRef.value.hide();
       }
-    }
-    if (e.key === "Enter") {
-      innerValue.value = innerOptions[selectedIndex.value];
-      dropdownRef.value.hide();
     }
   });
 });
diff --git a/package/document-component/src/document/zh-CN/components/autoComplete.md b/package/document-component/src/document/zh-CN/components/autoComplete.md
@@ -10,12 +10,10 @@
 ::: title 基础使用
 :::
 
-::: demo 使用 `lay-input` 标签, 创建输入框。
+::: demo 使用 `lay-autocomplete` 标签, 创建自动完成输入框。
 
 <template>
-  <lay-auto-complete v-model="value" :options="options"></lay-auto-complete>
-  <br/>
-  <lay-auto-complete v-model="value1" :options="options"></lay-auto-complete>
+  <lay-autocomplete v-model="value" :fetchSuggestions="fetchSuggestions"></lay-autocomplete>
 </template>
 
 <script>
@@ -24,18 +22,25 @@ import { ref, reactive } from 'vue'
 export default {
   setup() {
 
-    const value = ref(0);
-    const value1 = ref(0);
-    const options = reactive([
-        "1111",
-        "11112222",
-        "111122223333"
-    ]);
+    const value = ref("");
+    const fetchSuggestions = function(value) {
+      if(value === "") {
+        return new Promise((resolve) => resolve([]))
+      } else {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve([
+              "稻香 - 周杰伦",
+              "轨迹 - 周杰伦"
+            ])
+          }, 1000)
+        });
+      }
+    }
 
     return {
       value,
-      value1,
-      options
+      fetchSuggestions
     }
   }
 }
@@ -48,13 +53,13 @@ export default {
 
 ::: table
 
-| 属性                     | 描述                  | 类型         | 默认值         | 可选值         | 版本         |
-| -----------------------  | -------------------- |-------------- |-------------- | -------------- |-------------- |
-| name                     | 原始属性 name         | `string`             | --             | --             |--             |
-| placeholder              | 提示信息              | `string`             | --             | --             |--             |
-| disabled                 | 禁用                  | `boolean`           | `false`             | `true` `false` |--             |
-| v-model / modelValue     | 值                    | `string` `number`   | --             |--             |--             |
-| allow-clear              | 允许清空 allow-clear  | `boolean`             | `false`             | `true` `false` |--             |
+| 属性                 | 描述                 | 类型              | 默认值  | 可选值         | 版本 |
+| -------------------- | -------------------- | ----------------- | ------- | -------------- | ---- |
+| name                 | 原始属性 name        | `string`          | --      | --             | --   |
+| placeholder          | 提示信息             | `string`          | --      | --             | --   |
+| disabled             | 禁用                 | `boolean`         | `false` | `true` `false` | --   |
+| v-model / modelValue | 值                   | `string` `number` | --      | --             | --   |
+| allow-clear          | 允许清空 allow-clear | `boolean`         | `false` | `true` `false` | --   |
 
 :::
 
@@ -63,9 +68,9 @@ export default {
 
 ::: table
 
-| 名称  | 描述                | 参数                        |
-| ----- | ------------------- | -------------------------- |
-| 预留  | 预留                 | 预留                       |
+| 名称 | 描述 | 参数 |
+| ---- | ---- | ---- |
+| 预留 | 预留 | 预留 |
 
 :::
 
@@ -74,14 +79,14 @@ export default {
 
 ::: table
 
-| 名称   | 描述                   | 参数            |
-| -----  | --------------------- | ----------------|
-| 预留   | 预留                   | --              |
+| 名称 | 描述 | 参数 |
+| ---- | ---- | ---- |
+| 预留 | 预留 | --   |
 
 :::
 
 ::: contributor input
-:::  
+:::
 
 ::: previousNext input
-:::
+:::
diff --git a/package/document-component/src/document/zh-CN/guide/changelog.md b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -7,7 +7,7 @@
 ::: describe 正常情况下使用 每周 发布策略， 但关键的 bug 修复将需要热修复，所以实际发布版本 可能 每周超过 1 次。
 :::
 
-::: describe 若你需要查看更多详情，可前往 <a style="color:#009688;" target="_blank" href="https://gitee.com/layui/layui-vue/releases">Gitee Releases</a>。
+::: describe 若你需要查看更多详情，可前往 <a style="color:#009688;" target="_blank" href="https://gitee.com/layui/layui-vue/releases">Gitee</a>。
 :::
 
 ::: demo 
@@ -17,9 +17,9 @@
     <ul> 
       <a name="1-9-2"></a> 
       <li> 
-        <h3>1.9.1 <span class="layui-badge-rim">2023-03-09</span></h3> 
+        <h3>1.9.2 <span class="layui-badge-rim">2023-03-11</span></h3> 
         <ul> 
-          <li>[新增] auto-complete 组件，带提示的文本输入框，用于辅助输入。</li>     
+          <li>[新增] auto-complete 组件，带提示的文本输入框，用于辅助输入。<a href="https://gitee.com/layui/layui-vue/issues/I6JSOA">#I6JSOA</a></li>     
           <li>[新增] page 组件 showPage 属性开启时, 显示首页直达功能，从而改善易用性。<a href="https://gitee.com/layui/layui-vue/issues/I69ZW6">#I69ZW6</a></li>
           <li>[优化] page 组件 limits 所依赖的原生 select 高度, 使其与其他元素保持一致。</li>
         </ul>  
@@ -48,7 +48,7 @@
           <li>[新增] types 目录 components.d.ts 声明文件, web-types.json, attributes.json 和 tags.json 配置文件。</li>
           <li>[优化] upload 组件 cutOptions.layerOption.area 属性, 默认值由 ["640px","640px"] 修改为 "auto"。</li>
           <li>[优化] select 组件 multiple 属性为 true 时, 传递非 array 类型数据时的异常信息。</li>
-          <li>[重要] upload 组件 multiple 为 false 时, 上传时 file[0] 字段修改为 file 字段。</li>
+          <li>[重要] upload 组件 multiple 为 false 时, 上传时 file[0] 字段修改为 file 字段。<span style="color:red;">破坏性</span></li>
           <li>
               <h4 style="margin-bottom: 0px !important;font-weight: 500 !important;">layer</h4>
               <ul>
diff --git a/package/document-component/src/document/zh-CN/guide/problem.md b/package/document-component/src/document/zh-CN/guide/problem.md
@@ -13,7 +13,16 @@
 ::: describe 查阅：<a style="color:#009688;" href="https://staging-cn.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats">https://staging-cn.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats</a >
 :::
 
-::: title 全局 Component 作为 layer.open 内容, 出现 cannot be resolved 警告
+::: title layui 与 layui-vue 的区别 （摘自 Gitee 介绍）
+:::
+
+::: describe Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。
+:::
+
+::: describe Layui Vue 是一套 Vue 3.0 桌面端组件库，沿用 layui 设计规范，开箱即用。
+:::
+
+::: title 全局 Component 作为 layer.open 内容，出现 cannot be resolved 警告
 :::
 
 ::: describe 因为忽略了 CreateApp().use(layer) 过程, 使其创建了新的 appContext 实例, 导致与全局 Component 所在的 context 并不相同，因而无法获取到组件信息。
