easyui-prompt弹出框操作

EasyUI 是一款基于 jQuery 的 UI 组件库，提供了大量的易用、美观的 UI 组件，其中包括了 Prompt 弹出框组件。

Prompt 弹出框组件可以用于输入一些信息或者进行确认操作，常常用于表单的编辑或者删除操作。在本文中，将介绍如何使用 EasyUI 中的 Prompt 弹出框。

引入EasyUI库和CSS文件

在使用 EasyUI 的 Prompt 弹出框组件之前，首先需要引入 EasyUI 的库和 CSS 文件。可以从 EasyUI 官网下载库文件和 CSS 文件，或者通过 CDN 引入。

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui/themes/icon.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui/jquery.easyui.min.js"></script>

使用Prompt弹出框

使用 Prompt 弹出框组件需要调用 easyui 中的 prompt 方法，并传入相关参数，参数的格式如下：

$.messager.prompt(title, message, callback, icon, defaultValue);

参数说明：

• title：弹出框标题，字符串类型。
• message：弹出框提示信息，字符串类型。
• callback：回调函数，在确认按钮被点击时执行，函数的第一个参数为用户输入的值，即字符串类型的值，如果点击取消按钮，则该参数为 null。
• icon：弹出框图标，字符串类型，默认为问号图标。
• defaultValue：弹出框默认值，字符串类型。

下面是一个示例代码，展示了如何使用 Prompt 弹出框：

$.messager.prompt('编辑', '请输入用户名：', function(r){
    if (r){
        console.log('您输入的用户名是: ' + r);
        // 处理用户输入的逻辑
    }
}, 'info', 'admin');

运行上述代码，将会显示一个输入框，让用户输入用户名，点击确定后打印出用户输入的用户名。

取消操作

可以通过检测回调函数中传入的参数是否为 null 来判断是用户点击了取消按钮，还是输入了空值，可以在回调函数中加入判断代码，如下所示：

$.messager.prompt('编辑', '请输入用户名：', function(r){
    if (r === null) {
        console.log('您取消了此操作');
    } else if (r === '') {
        console.log('您输入了空值');
    } else {
        console.log('您输入的用户名是: ' + r);
        // 处理用户输入的逻辑
    }
}, 'info', 'admin');

总结

本文介绍了如何使用 EasyUI 的 Prompt 弹出框组件实现输入和确认操作，并针对取消操作进行了处理。在使用 Prompt 弹出框时需要注意传入的参数格式。