Отказаться от vue3 + nuxt3 js
У меня есть вопрос. Я хочу отменить событие отправки от дочернего компонента к родительскому компоненту (используя el-input в element plus).
Я пытаюсь узнать некоторые решения, но испускаю отказ, не работающий, например, ввод часов, испускаю modelValue. Я хочу передать 1 параметр "debounce", как указано выше, и предотвратить нормальную работу кода.
//Custom Input
<script lang = "ts" setup>
const search = ref('')
</script>
<template>
<CustomInput
:model-value = "search"
placeholder = "Search"
type = "search"
class = "w-full md:max-w-[330px]"
:debounce = "500"
@update:modelValue = "(newValue: string) => (search = newValue)"
/>
</template>
//input
<script lang = "ts" setup>
interface Props {
modelValue?: string
placeholder?: string
type: string
debounce: number
}
const props = withDefaults(defineProps<Props>(), {
modelValue: '',
placeholder: 'Please input',
type: 'text',
debounce: 0
})
const emit = defineEmits(['update:modelValue'])
// const debounceInput = debounce(() => {
// let value = 'ok'
// emit('update:modelValue', value)
// }, props.debounce)
const debounceInput = (e: any) => {
let value = e.target.value
emit('update:modelValue', value)
}
</script>
<template>
<el-input
v-bind = "$attrs"
:value = "modelValue"
:placeholder = "placeholder"
:type = "type"
class = "base-input"
:class = "{
search: type === 'search'
}"
@input = "debounceInput"
>
<template #suffix>
<el-icon>
<img
v-if = "type === 'search'"
class = "w-[18px] h-[18px] mx-auto cursor-pointer"
src = "images/search.svg"
alt = "logo"
/>
</el-icon>
</template>
</el-input>
</template>
//debounce function
export const debounce = (callback: Function, delayTime: number) => {
let timeOut
return () => {
timeOut = setTimeout(() => callback(), delayTime)
}
}
я только что отредактировал это
Ответы 1
устранение дребезга функции:
export function debounce(func, timeout) {
let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func(...args);
}, timeout);
};
}
Затем использовать его:
<script>
import { debounce } from 'debounce.js'
const debouncedInput = debounce((e) =>
emit("update:modelValue", e.target.value),
300 // timeout in ms
);
</script>
с общим <input> для простоты:
<template>
<input
:value = "modelValue"
@input = "debouncedInput"
placeholder = "Please input"
type = "text"
/>
</template>
Вот codeandbox пример. Также должно отлично работать при реализации с помощью <el-input> и машинописного текста, который я оставлю вам.
Кстати, эти свойства у вас есть на <CustomInput>:
:modelValue = "search"
@update:modelValue = "(newValue: string) => (search = newValue)"
Все можно заменить следующим сокращением:
v-model = "search"
Я попробовал ваш код, и он очень похож на мой код. Это действительно не работает с TypeScript и el-Input. я уверен в этом
@input то же самое для <input>, что и <el-input>, а машинописный текст - это просто... шрифты. это будет работать при условии правильной реализации. если у вас есть конкретная проблема с предоставленной функцией устранения дребезга, обновите свой вопрос, указав собственный обновленный код и указав ошибку реализации.
Глядя на документацию el-input, нет :value опоры. просто используйте v-model вместо этого
[plugin:vite:vue] v-model нельзя использовать в реквизите, потому что локальные привязки реквизита недоступны для записи. Вместо этого используйте привязку v-bind в сочетании с прослушивателем v-on, который генерирует событие update:x.
Это происходит, когда я использую «v-model» в вашем CustomInput. Я знаю, что ваш код правильный, но я не понимаю, почему он не работает в моем проекте.
Я просто пытаюсь: v-model в CustomInput ... но все равно не работает :(
можете ли вы объяснить мне, почему он работает в STACK, а не в IDE