🐛(component): 修复 input 组件 v-model 值不能为 0

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([
+interface InputEmits {
-  "update:modelValue",
+  (e: "blur", event: Event): void;
-  "change",
+  (e: "input", event: Event): void;
-  "input",
+  (e: "update:modelValue", value: string): void;
-  "focus",
+  (e: "change", event: Event): void;
-  "clear",
+  (e: "focus", event: Event): void;
-  "blur",
+  (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"

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

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 v-for="index of 200" :value="index" :label="index"></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>
 </template>