From 7e20eb9dacc972ed0cad295abc1a71ae2cb77350 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Fri, 8 Jul 2022 14:57:12 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(component):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=20input=20=E7=BB=84=E4=BB=B6=20v-model=20=E5=80=BC=E4=B8=8D?=
 =?UTF-8?q?=E8=83=BD=E4=B8=BA=200?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/src/component/input/index.vue   | 49 ++++++++++++-------
 .../src/document/zh-CN/components/input.md    |  2 +-
 .../src/document/zh-CN/components/select.md   | 17 +------
 package/layer/src/utils/index.ts              |  2 +-
 4 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/package/component/src/component/input/index.vue b/package/component/src/component/input/index.vue
index 9455e383..fa86963b 100644
--- a/package/component/src/component/input/index.vue
+++ b/package/component/src/component/input/index.vue
@@ -7,22 +7,22 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import { LayIcon } from "@layui/icons-vue";
-import { computed, useSlots } from "vue";
+import { computed, ref, useSlots, watch } from "vue";
 import { useI18n } from "../../language";
 
 export interface LayInputProps {
   name?: string;
   type?: string;
   value?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  modelValue?: string | number;
-  placeholder?: string;
-  allowClear?: boolean;
-  autofocus?: boolean;
-  autocomplete?: string;
   prefixIcon?: string;
   suffixIcon?: string;
+  modelValue?: string;
+  allowClear?: boolean;
+  autocomplete?: string;
+  placeholder?: string;
+  autofocus?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
 }
 
 const props = withDefaults(defineProps<LayInputProps>(), {
@@ -30,22 +30,33 @@ const props = withDefaults(defineProps<LayInputProps>(), {
   readonly: false,
   allowClear: false,
   autofocus: false,
-  modelValue: "",
+  modelValue: '',
 });
 
-const emit = defineEmits([
-  "update:modelValue",
-  "change",
-  "input",
-  "focus",
-  "clear",
-  "blur",
-]);
+interface InputEmits {
+  (e: "blur", event: Event): void;
+  (e: "input", event: Event): void;
+  (e: "update:modelValue", value: string): void;
+  (e: "change", event: Event): void;
+  (e: "focus", event: Event): void;
+  (e: "clear"): void;
+}
+
+const emit = defineEmits<InputEmits>();
 
 const { t } = useI18n();
 const slots = useSlots();
+const currentValue = ref<string>(String(props.modelValue));
 const hasContent = computed(() => (props.modelValue as string)?.length > 0);
 
+watch(() => props.modelValue, () => {
+  currentValue.value = String(props.modelValue);
+})
+
+watch(() => currentValue, () => {
+  emit("update:modelValue", currentValue.value);
+})
+
 const onInput = function (event: Event) {
   const inputElement = event.target as HTMLInputElement;
   const value = inputElement.value;
@@ -54,7 +65,7 @@ const onInput = function (event: Event) {
 };
 
 const onClear = () => {
-  emit("update:modelValue");
+  emit("update:modelValue", "");
   emit("clear");
 };
 
@@ -88,8 +99,8 @@ const classes = computed(() => {
     <input
       :type="type"
       :name="name"
-      :value="modelValue || value"
       :disabled="disabled"
+      :value="currentValue"
       :placeholder="placeholder"
       :autofocus="autofocus"
       :autocomplete="autocomplete"
diff --git a/package/document-component/src/document/zh-CN/components/input.md b/package/document-component/src/document/zh-CN/components/input.md
index c8f3cdbf..9db00397 100644
--- a/package/document-component/src/document/zh-CN/components/input.md
+++ b/package/document-component/src/document/zh-CN/components/input.md
@@ -22,7 +22,7 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const data1 = ref("内容");
+    const data1 = ref(0);
 
     return {
       data1
diff --git a/package/document-component/src/document/zh-CN/components/select.md b/package/document-component/src/document/zh-CN/components/select.md
index f96e3a9c..01cae2ce 100644
--- a/package/document-component/src/document/zh-CN/components/select.md
+++ b/package/document-component/src/document/zh-CN/components/select.md
@@ -236,22 +236,7 @@ export default {
 
 <template>
   <lay-select v-model="selected2">
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
+    <lay-select-option v-for="index of 200" :value="index" :label="index"></lay-select-option>
   </lay-select>
 </template>
 
diff --git a/package/layer/src/utils/index.ts b/package/layer/src/utils/index.ts
index fa2d3da3..09e0f51b 100644
--- a/package/layer/src/utils/index.ts
+++ b/package/layer/src/utils/index.ts
@@ -421,4 +421,4 @@ export function getNotifyAnimationClass(offset: any) {
     suffix = "rl";
   }
   return `${prefix}-${suffix}`;
-}
+}
\ No newline at end of file