Input 输入框

通过键盘输入内容，是最基础的表单域包装。

基础用法

<template>
  <div style="width: 300px;">
    <NInput v-model="input" placeholder="请输入内容" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const input = ref('')
</script>

禁用状态

设置 disabled 属性来禁用输入框。

<template>
  <div style="width: 300px;">
    <NInput v-model="input" disabled placeholder="请输入内容" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const input = ref('')
</script>

可清空

设置 clearable 属性来显示清空按钮。

<template>
  <div style="width: 300px;">
    <NInput v-model="input" clearable placeholder="请输入内容" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const input = ref('')
</script>

密码输入

设置 showPassword 属性可以得到一个可切换显示密码的输入框。

<template>
  <div style="width: 300px;">
    <NInput v-model="input" type="password" showPassword placeholder="请输入密码" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const input = ref('')
</script>

带图标

通过 prefix-icon 和 suffix-icon 属性来添加图标。

<template>
  <div style="width: 300px;">
    <NInput v-model="input1" placeholder="请选择日期">
      <template #prefix>
        <span>📅</span>
      </template>
    </NInput>
    <div style="margin-top: 12px;">
      <NInput v-model="input2" placeholder="请输入内容">
        <template #suffix>
          <span>🔍</span>
        </template>
      </NInput>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const input1 = ref('')
const input2 = ref('')
</script>

文本域

设置 type="textarea" 来得到文本域。

<template>
  <div style="width: 300px;">
    <NInput v-model="textarea" type="textarea" placeholder="请输入内容" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const textarea = ref('')
</script>

自适应文本域

设置 autosize 属性可以使文本域高度自适应。

<template>
  <div style="width: 300px;">
    <NInput
      v-model="textarea"
      type="textarea"
      autosize
      placeholder="请输入内容"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const textarea = ref('')
</script>

也可以配置最小行数和最大行数。

<template>
  <div style="width: 300px;">
    <NInput
      v-model="textarea"
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 6 }"
      placeholder="请输入内容"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const textarea = ref('')
</script>

尺寸

使用 size 属性来设置输入框大小。

<template>
  <div style="width: 300px;">
    <NInput v-model="input1" size="large" placeholder="大型输入框" />
    <div style="margin-top: 12px;">
      <NInput v-model="input2" placeholder="默认输入框" />
    </div>
    <div style="margin-top: 12px;">
      <NInput v-model="input3" size="small" placeholder="小型输入框" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
</script>

字数统计

设置 show-word-limit 属性来显示字数统计，需要配合 maxlength 使用。

<template>
  <div style="width: 300px;">
    <NInput
      v-model="input"
      maxlength="100"
      showWordLimit
      placeholder="请输入内容"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const input = ref('')
</script>

只读

设置 readonly 属性来设置只读。

<template>
  <div style="width: 300px;">
    <NInput v-model="input" readonly placeholder="请输入内容" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const input = ref('只读内容')
</script>

API

Props

属性	说明	类型	默认值
modelValue	绑定值	string | number	—
type	类型	'text' | 'textarea' | 'password'	'text'
size	尺寸	'large' | 'default' | 'small'	'default'
placeholder	占位符	string	—
clearable	是否可清空	boolean	false
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
maxlength	最大输入长度	number | string	—
showWordLimit	是否显示字数统计	boolean	false
showPassword	是否显示切换密码图标	boolean	false
rows	文本域行数	number	3
autosize	文本域自适应高度	boolean | { minRows?: number; maxRows?: number }	false

Events

事件名	说明	类型
update:modelValue	绑定值变化时触发	(value: string) => void
input	输入时触发	(value: string) => void
change	值改变时触发	(value: string) => void
focus	获取焦点时触发	(event: FocusEvent) => void
blur	失去焦点时触发	(event: FocusEvent) => void
clear	清空时触发	() => void

Slots

插槽名	说明
prefix	输入框头部内容
suffix	输入框尾部内容
prepend	输入框前置内容
append	输入框后置内容

方法

方法名	说明	类型
focus	使 input 获取焦点	() => void
blur	使 input 失去焦点	() => void
select	选中 input 中的文字	() => void
clear	清空输入框	() => void