Input

此组件提供了一个可定制的输入框，支持双向数据绑定，并提供了丰富的类名和属性设置选项。

属性

名称	类型	默认值	描述
defaultValue	string 或 number	undefined	输入框的初始值。当没有 modelValue 时使用。
modelValue	string 或 number	undefined	绑定的值，用于双向数据绑定。
class	HTMLAttributes['class']	undefined	附加到输入框的 CSS 类名。可以是一个字符串或数组。

事件

名称	参数类型	描述
update:modelValue	string 或 number	当输入框的值改变时触发，携带新的值。

使用示例

<template>
  <InputComponent
    v-model="inputValue"
    :class="['my-custom-class', { 'is-disabled': isDisabled }]"
  />
</template>

<script setup lang="ts">
import InputComponent from './InputComponent.vue';

const inputValue = ref('Hello World');
const isDisabled = ref(false);
</script>

样式和行为

• Autocomplete: 禁用了自动完成功能，以确保输入框的行为符合预期。
• Spellcheck: 关闭拼写检查，避免干扰输入过程。
• CSS 类: 提供了丰富的 CSS 类名，用于控制输入框的外观和状态（如聚焦、禁用等）。

注意事项

• 当使用 v-model 时，优先级高于 defaultValue。
• class 属性支持动态绑定，允许根据条件添加不同的 CSS 类。