Prompt 输入确认框

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

基础用法

通过组件库中暴露的 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(
        value => NueMessage.success(`您的姓名是: ${value}`),
        () => NueMessage.warn('操作取消')
    );
};
</script>

更换输入类型

通过成员 input-type 设置输入框的类型。由于组件内部进行了复用，因此 type 可选值包括 <NueInput> 组件的 type 属性可选值以及 textarea。当 type 值为 textarea 时，输入组件会渲染为 <NueTextarea>。

<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';

function showPromptWithInputType(type) {
    NuePrompt({
        title: '输入确认',
        placeholder: '请输入内容',
        inputType: type,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(
        value => NueMessage.success(`内容: ${value}`),
        () => NueMessage.warn('操作取消')
    );
}
</script>

输入验证器

通过成员 validator 设置输入框的验证器，接收一个同步或者异步函数。验证器函数允许接收一个参数，即输入框的值，最终需要返回一个布尔值以表示输入的数据是否合法。

<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}$/);
            return regExp.test(value as string);
        }
    }).then(value => NueMessage.success(`输入的手机号码为：${value 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}$/);
            return regExp.test(value as string);
        }
    }).then(
        value => NueMessage.success(`输入的手机号码为：${value as string}`),
        () => NueMessage.info('操作取消')
    );
};
</script>

确认前的回调函数

通过成员 before-confirm 设置输入确认前的回调函数，接收一个函数作为参数。回调函数接收一个参数，即输入框的值，可以对输入的数据进行处理，然后返回处理后的数据。

<template>
    <nue-button @click="showPromptWithOnConfirm">确认回调</nue-button>
</template>

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

const showPromptWithOnConfirm = () => {
    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}$/);
            return regExp.test(value as string);
        },
        onConfirm: async value => {
            await new Promise(resolve => setTimeout(resolve, 1000));
            const isSuccess = value && Math.random() > 0.7;
            if (!isSuccess) throw new Error('数据库更新失败');
            return value;
        }
    }).then(
        value => NueMessage.success(`输入的手机号码为：${value as string}`),
        err => err && NueMessage.error(err)
    );
};
</script>