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

This commit is contained in:
就眠儀式 2022-07-08 14:57:12 +08:00
parent 6d4ef836ef
commit 7e20eb9dac
4 changed files with 33 additions and 37 deletions

View File

@ -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"

View File

@ -22,7 +22,7 @@ import { ref } from 'vue'
export default {
setup() {
const data1 = ref("内容");
const data1 = ref(0);
return {
data1

View File

@ -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>

View File

@ -421,4 +421,4 @@ export function getNotifyAnimationClass(offset: any) {
suffix = "rl";
}
return `${prefix}-${suffix}`;
}
}