Components

Input 输入框

带标签、提示文案与错误态的文本输入；标签、说明和错误状态会自动关联至原生控件。

基础用法

hint 与 error 互斥，error 时环线转为红色。

集群标识符

由小写字母、数字及横线组成

API 端点

该端点未通过 TLS 证书校验

<div class="grid gap-5 sm:grid-cols-2">
  <Input v-model="text" label="集群标识符" placeholder="请输入节点名称…" hint="由小写字母、数字及横线组成" />
  <Input v-model="err" label="API 端点" error="该端点未通过 TLS 证书校验" />
</div>

尺寸与前后缀

leading / trailing 插槽嵌入更醒目的预设前后缀、图标与单位。

https://

<div class="grid gap-5 sm:grid-cols-2">
  <Input v-model="s1" size="sm" placeholder="Small" />
  <Input v-model="s2" size="lg" placeholder="Large" />
  <Input v-model="s3" placeholder="gateway.recloud.studio">
    <template #leading>https://</template>
  </Input>
  <Input v-model="s4" placeholder="搜索节点…" disabled />
</div>

API 参考

属性	类型	默认值	说明
model-value	string \| number	—	v-model 绑定值。
id	string	自动生成	原生控件 ID，可用于稳定 SSR 输出。
label / hint / error	string	—	标签、说明与错误文案，会自动关联至控件。
size	'sm' \| 'md' \| 'lg'	md	36 / 40 / 44px 高度。
type	string	text	原生 input 类型。
disabled / readonly / required	boolean	false	状态控制。
leading / trailing	slot	—	框内前后缀。