Input 输入框

用于获取用户输入。

基础用法

通过 NueInput 组件生成输入框。

通过 v-model 绑定一个响应式数据，随输入内容变化。

通过 type 属性设置输入框类型，属性值可以是 text*、password、number、email、textarea、url 的其中之一。

通过 placeholder 属性设置占位字符，接收 string 类型。

<template>
    <nue-div vertical align="stretch">
        <nue-input
            v-model="inputVModel1"
            type="text"
            placeholder="Please input your account"
        />
        <nue-input
            v-model="inputVModel2"
            type="password"
            placeholder="Please input your password"
        />
    </nue-div>
</template>

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

    const inputVModel1 = ref('');
    const inputVModel2 = ref('');
</script>

禁用状态

通过 disabled 属性设置禁用状态，接收 boolean 类型。

<template>
    <nue-input
        v-model="inputVModel"
        placeholder="Please input something"
        disabled
    />
</template>

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

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

设置图标

通过 icon 属性设置图标，接收 string 类型。

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

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

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

清除控制与密码显示控制

通过 clearable 属性设置是否显示清除按钮，接收 boolean 类型。

通过 allow-show-password 属性设置是否显示密码，接收 boolean 类型。

TIP

allow-show-password 属性仅在 type 属性为 password 时生效。

<template>
    <nue-div vertical align="stretch">
        <nue-input
            v-model="inputVModel1"
            placeholder="Please input your account"
            clearable
        />
        <nue-input
            v-model="inputVModel2"
            type="password"
            placeholder="Please input your password"
            clearable
            allow-show-password
        />
    </nue-div>
</template>

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

    const inputVModel1 = ref('');
    const inputVModel2 = ref('');
</script>

字数限制与计数

通过 maxlength 属性设置最大字符限制，接收 string 类型。

通过 counter 属性设置是否显示字数统计，接收 off*、word-limit、word-left 以及 both 四个值之一。

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

TIP

maxlength 属性为原生 HTMLElement.maxlength 属性的映射。
建议 counter 属性与 maxlength 属性配合使用。

<template>
    <nue-div vertical align="stretch">
        <nue-input
            v-model="inputVModel"
            placeholder="Please input something"
            :maxlength="inputMaxlength"
        />
        <nue-input
            v-model="inputVModel"
            placeholder="Please input something"
            :maxlength="inputMaxlength"
            counter="word-limit"
        />
        <nue-input
            v-model="inputVModel"
            placeholder="Please input something"
            :maxlength="inputMaxlength"
            counter="word-left"
        />
        <nue-input
            v-model="inputVModel"
            placeholder="Please input something"
            :maxlength="inputMaxlength"
            counter="both"
        />
    </nue-div>
</template>

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

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

防抖

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

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

<template>
    <nue-div vertical align="stretch">
        <nue-input
            v-model="inputVModel"
            placeholder="Please input something"
            :debounceTime="500"
        />
        <nue-text size="14px"> 输入框文本：{{ inputVModel }} </nue-text>
    </nue-div>
</template>

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

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

样式设置

输入框尺寸

输入框拥有小、正常、大三种尺寸，通过 size 属性设置，小和大分别对应 size 值中的 small 和 large，不指定 size 则表示正常尺寸。

<template>
    <nue-div align="center" wrap="nowrap" gap="12px">
        <nue-input
            v-model="inputVModel"
            placeholder="Please input something"
            size="large"
        />
        <nue-input v-model="inputVModel" placeholder="Please input something" />
        <nue-input
            v-model="inputVModel"
            placeholder="Please input something"
            size="small"
        />
    </nue-div>
</template>

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

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

输入框外形

通过 shape 属性设置输入框外形，接收 rounded 或 noshape。

<template>
    <nue-div align="center">
        <nue-input
            v-model="inputVModel"
            placeholder="Please input something"
            shape="rounded"
        />
        <nue-input
            v-model="inputVModel"
            placeholder="Please input something"
            shape="noshape"
        />
    </nue-div>
</template>

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

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

自定义样式

通过 theme 属性可以给按钮添加自定义的类名。

属性接受 string 以及 string[] 类型的值，表示一个或多个自定义的类名。

TIP

添加后的类名为 nue-input-- 加上 theme 属性的值。如 theme="custom"，则该类名为 nue-input--custom。

<template>
    <nue-div vertical align="stretch">
        <nue-input
            v-model="inputVModel"
            placeholder="搜索"
            icon="search"
            theme="linear"
        />
    </nue-div>
</template>

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

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

<style scoped>
    .nue-input--linear {
        transition: all 0.3s;
        border: none;
        border-bottom: 2px solid #cccccc;
        border-radius: 0px;

        --border-width: 0px;
        --padding-y: 4px;
        --hover-border-color: #8ac7ab;
        --focus-border-color: #42b983;
        --focus-shadow-color: transparent;
        --focus-background-color: transparent;

        &:focus-within {
            border: none;
            border-bottom: 2px solid #42b983;
        }
    }
</style>

Input 输入框 ​

基础用法 ​

禁用状态 ​

设置图标 ​

清除控制与密码显示控制 ​

字数限制与计数 ​

防抖 ​

样式设置 ​

输入框尺寸 ​

输入框外形 ​

自定义样式 ​