Input 输入框

何时使用

需要单行文本录入时使用。

基础用法

当前值：空

<script setup lang="ts">
import { ref } from 'vue'
import { DanInput } from '@dandan-ui/ui'

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

<template>
  <div style="display: grid; gap: 8px; max-width: 360px">
    <DanInput v-model="value" placeholder="请输入内容" />
    <div style="font-size: 13px; color: var(--dan-color-text-secondary)">
      当前值：{{ value || '空' }}
    </div>
  </div>
</template>

输入类型

通过 type 使用原生输入类型，例如文本、密码、数字、邮箱等。

<script setup lang="ts">
import { reactive } from 'vue'
import { DanInput } from '@dandan-ui/ui'

const form = reactive({
  text: '',
  password: '',
  number: '',
  email: '',
  tel: '',
  url: '',
  search: '',
})
</script>

<template>
  <div style="display: grid; gap: 12px; max-width: 420px">
    <DanInput v-model="form.text" type="text" placeholder="文本 text" />
    <DanInput
      v-model="form.password"
      type="password"
      placeholder="密码 password"
    />
    <DanInput v-model="form.number" type="number" placeholder="数字 number" />
    <DanInput v-model="form.email" type="email" placeholder="邮箱 email" />
    <DanInput v-model="form.tel" type="tel" placeholder="电话 tel" />
    <DanInput v-model="form.url" type="url" placeholder="网址 url" />
    <DanInput v-model="form.search" type="search" placeholder="搜索 search" />
  </div>
</template>

密码显示切换

配合 suffix 插槽与图标，实现显示 / 隐藏密码。

<script setup lang="ts">
import { ref } from 'vue'
import { DanIcon, DanInput } from '@dandan-ui/ui'

const password = ref('123456')
const visible = ref(false)
</script>

<template>
  <DanInput
    v-model="password"
    :type="visible ? 'text' : 'password'"
    placeholder="点击右侧图标显示/隐藏"
    style="max-width: 360px"
  >
    <template #suffix>
      <DanIcon
        :name="visible ? 'eye' : 'eye-off'"
        style="cursor: pointer"
        @click="visible = !visible"
      />
    </template>
  </DanInput>
</template>

尺寸

<script setup lang="ts">
import { ref } from 'vue'
import { DanInput } from '@dandan-ui/ui'

const value = ref('dan-ui')
</script>

<template>
  <div style="display: grid; gap: 12px; max-width: 420px">
    <DanInput v-model="value" size="small" placeholder="small" />
    <DanInput v-model="value" size="default" placeholder="default" />
    <DanInput v-model="value" size="large" placeholder="large" />
  </div>
</template>

可清空

×

<script setup lang="ts">
import { ref } from 'vue'
import { DanInput } from '@dandan-ui/ui'

const value = ref('可清空内容')
</script>

<template>
  <DanInput
    v-model="value"
    clearable
    placeholder="输入后显示清空按钮"
    style="max-width: 360px"
  />
</template>

禁用与只读

<script setup lang="ts">
import { DanInput } from '@dandan-ui/ui'
</script>

<template>
  <div style="display: grid; gap: 12px; max-width: 360px">
    <DanInput model-value="禁用状态" disabled />
    <DanInput model-value="只读状态" readonly />
  </div>
</template>

前缀 / 后缀

￥CNY

<script setup lang="ts">
import { ref } from 'vue'
import { DanIcon, DanInput } from '@dandan-ui/ui'

const user = ref('')
const amount = ref('')
</script>

<template>
  <div style="display: grid; gap: 12px; max-width: 360px">
    <DanInput v-model="user" placeholder="用户名">
      <template #prefix>
        <DanIcon name="user" />
      </template>
    </DanInput>
    <DanInput v-model="amount" placeholder="金额">
      <template #prefix>￥</template>
      <template #suffix>CNY</template>
    </DanInput>
    <DanInput v-model="user" placeholder="搜索关键词" clearable>
      <template #prefix>
        <DanIcon name="search" />
      </template>
    </DanInput>
  </div>
</template>

字数限制

0 / 20

<script setup lang="ts">
import { ref } from 'vue'
import { DanInput } from '@dandan-ui/ui'

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

<template>
  <div style="display: grid; gap: 8px; max-width: 360px">
    <DanInput
      v-model="value"
      maxlength="20"
      placeholder="最多 20 个字符"
      clearable
    />
    <div style="font-size: 13px; color: var(--dan-color-text-secondary)">
      {{ value.length }} / 20
    </div>
  </div>
</template>

API

Props

属性	说明	类型	默认值	必填
modelValue / v-model	输入框绑定值	string | number	''	否
type	原生 input[type]，常用：text / password / number / email / tel / url / search	string	'text'	否
size	尺寸；未传时继承 ConfigProvider	'small' | 'default' | 'large'	—	否
disabled	禁用；在 Form 内也会继承表单 disabled	boolean	false	否
readonly	只读，仍可聚焦但不可编辑	boolean	false	否
clearable	有内容且非禁用/只读时显示清空按钮	boolean	false	否
placeholder	占位文案	string	''	否
maxlength	最大输入长度（透传原生）	number	—	否

其余原生属性（如 autocomplete、name）可通过透传 attrs 传到内部 <input>。

Events

事件名	说明	回调参数
update:modelValue	v-model 更新	(value: string) => void
input	每次输入触发	(value: string) => void
change	变更确认（原生 change）时触发，并联动 FormItem 校验	(value: string) => void
focus	获得焦点	(event: FocusEvent) => void
blur	失去焦点，并联动 FormItem 校验	(event: FocusEvent) => void
clear	点击清空按钮后触发	() => void

Slots

插槽名	说明	作用域参数
prefix	输入框左侧前置内容（图标、单位等）	—
suffix	输入框右侧后置内容（图标、单位、密码显隐等）	—

与 Form 联用

• 放在 DanFormItem 内且设置 prop 后，change / blur 会触发对应字段校验。
• 表单 disabled 会禁用内部输入。

Token

变量	说明
--dan-color-border / --dan-color-primary	边框与聚焦态
--dan-control-height-sm/md/lg	高度
--dan-color-primary-light	聚焦光晕