Input 输入框

输入单行文本或数字。日期、文件和颜色使用对应的独立组件。

命令行安装

npx @loongship-kit/ui add input

基础用法

当前输入文本: （空）

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { Input } from '@/components/loongship/input'

const vesselName = ref('')
</script>

<template>
  <Input v-model="vesselName" placeholder="Enter vessel name" />
</template>

数字输入

数字输入的值类型

设置 type="number" 后，非空值通过 v-model 更新为 number；清空时更新为空字符串，便于表达尚未填写的表单状态。

IMO number 当前数值: （空）

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { Input } from '@/components/loongship/input'

const imoNumber = ref<number | ''>('')
</script>

<template>
  <label>
    IMO number
    <Input
      v-model="imoNumber"
      type="number"
      min="1000000"
      max="9999999"
      step="1"
      placeholder="9876543"
    />
  </label>
  <span>当前数值: {{ imoNumber || '（空）' }}</span>
</template>

禁用与只读

表单校验

组件支持禁用和只读状态。表单校验与错误提示请参考 Form 的完整示例。

查看代码

<template>
  <Input disabled model-value="Disabled text" />
  <Input readonly model-value="IMO 9876543 (Readonly)" />
</template>

API

属性

属性	类型	默认值	说明
v-model	string | number	-	当前输入值
defaultValue	string | number	-	非受控模式的初始值
type	'text' | 'number'	'text'	文本或数字输入模式
name	string	-	表单字段名
placeholder	string	-	占位文本
disabled	boolean	false	禁用输入
readonly	boolean	false	只读输入
required	boolean	false	必填约束
min	string | number	-	最小值，仅用于 type="number"
max	string | number	-	最大值，仅用于 type="number"
step	string | number	1	步进，仅用于 type="number"
minlength	number	-	最短文本长度
maxlength	number	-	最长文本长度
pattern	string	-	正则校验规则
autocomplete	string	-	浏览器自动填充提示
inputmode	string	-	软键盘类型提示
aria-invalid	boolean | 'true' | 'false'	-	错误视觉和无障碍状态
class	ClassValue	-	自定义类名

事件

事件	参数	说明
update:modelValue	value: string | number	输入值改变时触发
input	InputEvent	原生输入事件
change	Event	值提交变更时触发
focus / blur	FocusEvent	获得或失去焦点时触发

插槽

无内容插槽。