在前端开发中，页面交互会频繁地需要用户输入。如果使用原生的浏览器弹窗或者简单的输入框，会显得很不美观，也不够灵活。早期的前端交互库如 jQuery UI、Bootstrap、Semantic UI 等虽然提供了更多灵活的交互控件，但是却要依赖庞大的代码库。
现在，可以使用 prompt-sui 这个轻便的 npm 包来快速构建漂亮的交互控件。
安装
安装 prompt-sui 有两种方式，一种是通过 npm 安装：
npm install prompt-sui --save
另外一种方式是手动下载压缩包，并引入两个文件：
<link rel="stylesheet" href="path/to/prompt-sui.min.css"> <script src="path/to/prompt-sui.min.js"></script>
使用方法
使用 prompt-sui 不仅仅是在页面中引入相关的样式和 js 文件。具体使用还是需要通过 js 对象实例化 prompt-sui，然后设置需要呈现的控件类型、内容和样式。例如，以下例子是一个简单的确认对话框：
const prompt = new PromptUI();
prompt.confirm('您确定要删除该条记录吗？', function(result) {
if (result) {
// 确认删除的逻辑
} else {
// 取消删除的逻辑
}
});这里通过实例化 PromptUI 对象，使用 confirm 方法来实现确认对话框的效果。confirm 方法有两个参数，第一个是对话框的提示文本，第二个是一个回调函数，当用户点击确定或取消按钮后，该回调函数会被调用。
类似的，还有一个警告对话框的例子：
const prompt = new PromptUI();
prompt.alert('该操作需要管理员权限！', function() {
// 关闭警告对话框后的逻辑
});alert 方法也有两个参数，第一个是警告文本，第二个是一个回调函数，当用户点击确定按钮后，该回调函数会被调用。
除了以上两种简单的对话框外，prompt-sui 还支持多种交互控件，比如选择器、输入框、单选框、复选框等。这些交互控件的样式和功能都非常实用，而且现成可用，只需要根据自己的需要进行简单的设置即可。
深度学习
使用 prompt-sui，遵循以下原则可以更好地提高其使用效果：
1. 风格一致
在设置 prompt-sui 的样式时，应该保证风格一致。即使不同的页面用到了不同的控件，它们的风格也应该保持一致。这样不仅能够保证视觉上的协调，也可以让用户更加容易地理解操作。因此，建议在使用 prompt-sui 时为每个控件设置统一的样式。
2. 简洁明了
prompt-sui 具有许多实用的功能，但是在使用时应该尽量简化和明确，以避免给用户造成困扰。例如，在选择器中只应该展示和选择必要的选项，没有必要加入复杂的筛选和排序功能。在设置提示信息时，应该简洁明了，避免使用太多业务专用词汇，保持用户易理解。
3. 切换流畅
在使用 prompt-sui 控件时，页面切换应该保持流畅。应当避免不必要的刷新，使用异步获取数据等方式提高页面的加载速度。如果使用 ajax 等异步方式获取数据，应当保证其及时性和数据的正确性。
指导意义
prompt-sui 是一个非常实用的前端控件库，能够帮助开发者快速构建漂亮的交互控件。在使用它的同时，需要遵循以上原则，将其使用的效果最大化。
同时，prompt-sui 也可以为开发者提供技术指导。在使用它的过程中，可以通过官方文档和源代码习得一些前端技巧和设计思路，以提高自己的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162362