Input 输入框

清晰的标签与错误信息，让输入始终有方向。

基础用法

设备名称

设备编号

当前名称：Augma

查看 Vue 源码

Vue · TypeScript

<script setup lang="ts">
import { AgmInput } from 'augma'
import { shallowRef } from 'vue'

const name = shallowRef('Augma')
</script>

<template>
  <div class="example-stack">
    <AgmInput
      v-model="name"
      label="设备名称"
      placeholder="输入设备名称"
      :error="name.trim() ? undefined : '请输入设备名称'"
    />
    <AgmInput label="设备编号" model-value="AGM-001" disabled />
    <output>当前名称：{{ name || '未填写' }}</output>
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

属性	类型	默认值	说明
id	string	undefined	可选的输入元素 ID，默认自动生成
modelValue	string	''	通过 v-model 更新
label	string	必填	可见标签
error	string	undefined	错误说明
disabled	boolean	false	禁止输入
type	string	'text'	原生输入类型

事件

• update:modelValue(string)

键盘操作与使用边界

使用原生输入键盘行为。placeholder、name、autocomplete、required 等属性传递到 input。

安装

import { AgmInput } from 'augma'
import 'augma/style.css'

复制可编辑源码：

pnpm dlx shadcn-vue@2.8.2 add https://augma.yunyoujun.cn/r/input.json