NueUI

Appearance

Prompt 输入确认框 ​

用于采集少量用户输入的对话框，并提供确认和取消按钮。

TIP

在需要两个或以上输入的情况或其他复杂场景下，建议转用“Dialog 对话框”组件。

基础用法 ​

通过组件库中暴露的 NuePrompt 方法创建输入对话框。

NuePrompt 方法接收一个 options 对象，参数中的成员用于设置输入对话框的属性。

  • title 设置输入确认框标题。
  • placeholder 设置输入框的占位符。
  • confirmButtonText 设置确认按钮的文字。
  • cancelButtonText 设置取消按钮的文字。

<template>
    <nue-button @click="showPrompt">创建一个输入确认框</nue-button>
</template>

<script lang="ts" setup>
import { NueMessage, NuePrompt } from 'nue-ui';

const showPrompt = () => {
    NuePrompt({
        title: '请输入您的姓名',
        placeholder: '请输入您的姓名',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(([isByCancel, inputValue]) => {
        if (isByCancel) return;
        NueMessage.success(`输入的文本为：${inputValue as string}`);
    });
};
</script>

关于返回值 ​

输入确认框方法的返回值是一个 Promise 对象。不管用户点击了确认按钮还是取消按钮，Promise 都将置为 Resolved。

Promise 的 resolve 值是一个两个元素的数组，其中一个为布尔值，用于表示用户是否点击了取消按钮；另一个则是输入框的值。

根据设计，组件中含有错误提示功能，因此输入确认框方法返回的 Promise 不会被置为 Rejected。

具体的返回值类型定义如下（简化）：

typescript
type IsByCancel = boolean;
type InputValue = unknown;
type CallerResult = [IsByCancel, InputValue];
// 输入确认框的返回值类型
type CallerReturn = Promise<CallerResult>;

更换输入类型 ​

通过属性 input-type 设置输入框的类型。type 可选值包括 number | text | password | email | textarea。

<template>
    <nue-div>
        <nue-button @click="showPromptWithInputType('password')">密码类型</nue-button>
        <nue-button @click="showPromptWithInputType('number')">数字类型</nue-button>
        <nue-button @click="showPromptWithInputType('textarea')">富文本类型</nue-button>
    </nue-div>
</template>

<script lang="ts" setup>
import { NueMessage, NuePrompt } from 'nue-ui';
import type { NueInputType } from 'nue-ui';

function showPromptWithInputType(type: NueInputType) {
    NuePrompt({
        title: '输入确认',
        placeholder: '请输入内容',
        inputType: type,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(([isByCancel, inputValue]) => {
        if (isByCancel) return;
        NueMessage.success(`输入的文本为：${inputValue as string}`);
    });
}
</script>

输入验证器 ​

通过属性 validator 设置输入框的验证器，支持同步或异步函数。

验证器函数允许接收一个参数，即输入框的值。最终需要返回一个错误信息来表示验证是否通过。返回 null 表示验证通过；返回 string | Error 则表示验证失败，其中的值会被组件内部处理并显示为错误提示。

具体类型如下（简化）：

typescript
type ValidatorErr = string | Error | null;
type Validator: (value: unknown) => ValidatorErr | Promise<ValidatorErr>

<template>
    <nue-div>
        <nue-button @click="showPromptWithValidator">同步验证器</nue-button>
        <nue-button @click="showPromptWithAsyncValidator">异步验证器</nue-button>
    </nue-div>
</template>

<script lang="ts" setup>
import { NueMessage, NuePrompt } from 'nue-ui';

const showPromptWithValidator = () => {
    NuePrompt({
        title: '手机号码填写',
        placeholder: '请输入您的手机号 ...',
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        validator: value => {
            const regExp = new RegExp(/^(?:(?:\+|00)86)?1[3456789]\d{9}$/);
            const isMatched = regExp.test(value as string);
            return isMatched ? null : '请输入正确的手机号码';
        }
    }).then(([isByCancel, inputValue]) => {
        if (isByCancel) return;
        NueMessage.success(`输入的手机号码为：${inputValue as string}`);
    });
};

const showPromptWithAsyncValidator = () => {
    NuePrompt({
        title: '手机号码填写',
        placeholder: '请输入您的手机号 ...',
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        validator: async value => {
            await new Promise(resolve => setTimeout(resolve, 1000));
            const regExp = new RegExp(/^(?:(?:\+|00)86)?1[3456789]\d{9}$/);
            const isMatched = regExp.test(value as string);
            return isMatched ? null : '请输入正确的手机号码';
        }
    }).then(([isByCancel, inputValue]) => {
        if (isByCancel) return;
        NueMessage.success(`输入的手机号码为：${inputValue as string}`);
    });
};
</script>

确认时的回调函数 ​

通过属性 on-confirm 设置输入确认时的回调函数，支持同步或异步函数。

确认时的回调函数能够收到两个形参，分别是输入框的值以及一个用于结束确认流程的 done 函数。

on-confirm 回调函数需要返回一个错误信息，用于表示确认流程是否通过。如果返回 null 或 undefined，则表示确认流程通过（此时应调用 done 函数）。否则，返回的错误信息会被组件内部处理并显示为错误提示。

具体类型如下（简化）：

typescript
type OnConfirmErr = string | Error | null;
type VoidFn = () => void;
type OnConfirm: (value: unknown, done: VoidFn) => OnConfirmErr | Promise<OnConfirmErr>

<template>
    <nue-div>
        <nue-button @click="showPromptWithOnConfirm">同步确认回调</nue-button>
        <nue-button @click="showPromptWithAsyncOnConfirm">异步确认回调</nue-button>
    </nue-div>
</template>

<script lang="ts" setup>
import { NueMessage, NuePrompt } from 'nue-ui';

const showPromptWithOnConfirm = () => {
    NuePrompt({
        title: '手机号码填写',
        placeholder: '请输入您的手机号 ...',
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        validator: value => {
            const regExp = new RegExp(/^(?:(?:\+|00)86)?1[3456789]\d{9}$/);
            const isMatched = regExp.test(value as string);
            return isMatched ? null : '请输入正确的手机号码';
        },
        onConfirm: (value, done) => {
            if (value === '13536563303') {
                done();
                return null;
            }
            return '手机号码错误';
        }
    }).then(([isByCancel, inputValue]) => {
        if (isByCancel) {
            NueMessage.info('操作取消');
            return;
        }
        NueMessage.success(`输入的手机号码为：${inputValue as string}`);
    });
};

const showPromptWithAsyncOnConfirm = () => {
    NuePrompt({
        title: '手机号码填写',
        placeholder: '请输入您的手机号 ...',
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        validator: async value => {
            await new Promise(resolve => setTimeout(resolve, 1000));
            const regExp = new RegExp(/^(?:(?:\+|00)86)?1[3456789]\d{9}$/);
            const isMatched = regExp.test(value as string);
            return isMatched ? null : '请输入正确的手机号码';
        },
        onConfirm: async (value, done) => {
            await new Promise(resolve => setTimeout(resolve, 1000));
            if (value === '13536563303') {
                done();
                return null;
            }
            return '手机号码错误';
        }
    }).then(([isByCancel, inputValue]) => {
        if (isByCancel) {
            NueMessage.info('操作取消');
            return;
        }
        NueMessage.success(`输入的手机号码为：${inputValue as string}`);
    });
};
</script>

组件属性与事件 ​

下方涵盖了 NuePrompt 方法所有的可用参数与回调。

参数 ​

属性类型默认值说明
titlestring-标题
descriptionstring-描述
placeholderstring-占位符
inputType'text' | 'password' | 'number' | 'email' | 'textarea'-输入类型
inputValuestring | number-输入值
confirmButtonTextstring-确认按钮文字
cancelButtonTextstring-取消按钮文字
animationstring | { name: string; duration?: number }-打开动画
closeAnimationstring | { name: string; duration?: number }-关闭动画
validator(value: unknown) => string | Error | null | Promise<string | Error | null>-验证器
onConfirm(value: unknown, done: () => void) => string | Error | null | Promise<string | Error | null>-确认回调
afterConfirm() => void | Promise<void>-确认后回调
afterCancel() => void | Promise<void>-取消后回调
beforeOpen() => void-打开前回调
afterOpen() => void-打开后回调
beforeClose() => void-关闭前回调
afterClose() => void-关闭后回调
themestring | string[] | Record<string, boolean>-主题样式（继承自 GlobalProps）

Released under the MIT License.

Copyright © 2026-present Nathan Lee