背景:
封装一个使用功能相同使用频率较高的input公共组件作为子组件,大多数长度要求为200,且实时显示统计子数,部分input有输入提示。
代码实现如下:
<template><el-input v-model="inputValue" type="textarea" :maxlength="maxlength" :placeholder="placeholder" autosize show-word-limit @input="handleInput"></el-input>
</template><script setup lang="ts">
const inputValue = ref('')
interface Props {placeholder: string;maxlength: number;
}
withDefaults(defineProps<Props>(), {placeholder: '',maxlength: 200,autosize: true,showWordLimit: true,
});const emit = defineEmits(['update:modelValue']);
const handleInput = () => {emit('update:modelValue', inputValue.value);
};
</script>
上面代码实现,console控制台就会有warn:
所有可传可不传的属性,我们都要给加上?,console控制台就没有warn信息。
interface Props {placeholder?: string;maxlength?: number;
}