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。

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

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 则表示验证失败，其中的值会被组件内部处理并显示为错误提示。

具体类型如下（简化）：

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 函数）。否则，返回的错误信息会被组件内部处理并显示为错误提示。

具体类型如下（简化）：

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>