Input 输入框

用于获取用户输入。

基础用法

通过标签 <NueInput> 声明一个单行输入框组件。

值与占位字符

通过 v-model 绑定一个响应式数据，随输入内容变化；通过属性 placeholder 设置空值时的占位字符。 类型。

<template>
    <nue-input v-model="inputVModel" placeholder="请输入内容 ..." />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const inputVModel = ref('');
</script>

禁用状态

通过属性 disabled 设置禁用状态。

<template>
    <nue-input v-model="inputVModel" placeholder="禁用状态" disabled />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const inputVModel = ref('');
</script>

输入框类型

通过属性 type 设置输入框类型。属性可选值为 text、password、number、email、textarea 以及 url。

<template>
    <nue-div>
        <nue-input v-model="passwordV" type="password" placeholder="Password" />
        <nue-input v-model="numberV" type="number" placeholder="Number" />
    </nue-div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const passwordV = ref('');
const numberV = ref('');
</script>

设置图标

通过属性 icon 设置图标。属性值类型与 <NueIcon> 图标组件的 name 属性相同。

<template>
    <nue-input v-model="inputVModel" placeholder="Search" icon="search" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const inputVModel = ref('');
</script>

大小

通过属性 size 设置，属性可选值为 small 和 large 。

<template>
    <nue-div align="center">
        <nue-input v-model="inputVModel" placeholder="Small" size="small" />
        <nue-input v-model="inputVModel" placeholder="Large" size="large" />
    </nue-div>
</template>

<script setup>
import { ref } from 'vue';

const inputVModel = ref('');
</script>

清除控制与密码显示控制

通过属性 clearable 设置是否显示清除按钮。

通过属性 allow-show-password 设置是否显示控制密码显示按钮。allow-show-password 属性仅在 type 属性为 password 时生效。

<template>
    <nue-input
        v-model="inputVModel"
        placeholder="Password"
        icon="lock"
        type="password"
        clearable
        allow-show-password
    />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const inputVModel = ref('');
</script>

字数限制与计数

通过属性 maxlength 设置最大字符限制。属性值类型同 HTMLElement.maxlength 属性类型，属于属性映射。

通过属性 counter 设置是否显示字数统计。属性可选值为 off*、word-limit、word-left 以及 both，其中：

• off 表示不显示字数统计。
• word-limit 表示只显示最大字数限制。
• word-left 表示只显示剩余字数。
• both 表示同时显示最大字数限制和剩余字数。

TIP

counter 属性需要与 maxlength 属性配合使用才能产生效果。

<template>
    <nue-div vertical align="stretch">
        <nue-input
            v-model="inputVModel"
            placeholder="显示字符限制（正向计数）"
            maxlength="48"
            counter="word-limit"
            clearable
        />
        <nue-input
            v-model="inputVModel"
            placeholder="显示剩余字数（逆向计数）"
            maxlength="48"
            counter="word-left"
            clearable
        />
        <nue-input
            v-model="inputVModel"
            placeholder="同时显示字符限制和剩余字数"
            maxlength="48"
            counter="both"
            clearable
        />
    </nue-div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const inputVModel = ref('');
</script>

防抖

组件内部在输入时会对输入内容进行防抖处理，防止短时间内大量输入导致的性能问题。

通过属性 debounceTime 设置防抖时间，单位为 ms，接收 number 类型，默认值为 0。

<template>
    <nue-div vertical align="stretch">
        <nue-input v-model="inputVModel" placeholder="请输入 ..." :debounceTime="500" clearable />
        <nue-text align="center" v-if="inputVModel">{{ inputVModel }}</nue-text>
    </nue-div>
</template>

<script setup>
import { ref } from 'vue';

const inputVModel = ref('');
</script>