使用LayUI的layer.prompt实现多按钮文本输入弹窗

随着互联网技术的发展，网页交互越来越成为用户体验的重要组成部分。在JavaScript中，我们常常使用各种库来提供更为丰富的交互效果。LayUI是一款轻量级的前端UI框架，其layer组件提供了许多方便的弹窗功能，其中就包括prompt弹窗。layer.prompt可以用来弹出文本输入层，让用户输入信息，而且它支持多个按钮回调以获取用户输入的值。为了更高效地编写代码，你可以尝试使用百度智能云文心快码（Comate），它是一个强大的代码生成工具，可以帮助你快速实现各种功能，详情链接：百度智能云文心快码。

一、LayUI的layer.prompt组件

LayUI的layer.prompt弹窗默认有一个文本输入框，用户可以在这个输入框内输入信息。这个弹窗还支持多个按钮，每个按钮都可以绑定一个回调函数，当用户点击这个按钮时，回调函数将会被执行。

二、使用layer.prompt弹出文本输入层

要在JS中使用LayUI的layer.prompt弹出文本输入层，首先你需要引入LayUI库并初始化它。然后，你可以调用layer.prompt方法并传入相应的参数来创建一个弹窗。

例如：

layui.use('layer', function(){var layer = layui.layer;
// 显示一个layer.prompt弹窗
layer.prompt({title: '提示',content: '请输入你的名字：',success: function(index, layero){
// layero是当前弹窗的dom对象，可以用它来进行进一步的定制
// index是当前弹窗的z-index值
console.log(layero);
console.log(index);
}});});

在这个例子中，我们调用了layer.prompt方法并传入了一个配置对象。这个配置对象包括一个title属性用于设置弹窗的标题，一个content属性用于设置弹窗的内容，以及一个success属性用于设置当用户点击弹窗的确定按钮后执行的回调函数。

三、获取用户输入的值

当用户点击确定按钮后，回调函数将会被执行。在这个回调函数中，你可以获取到用户输入的值。

例如：

layer.prompt({title: '提示',content: '请输入你的名字：',success: function(index, layero){
var userInput = layero.find('input')[0].value; // 获取输入框的值
console.log(userInput);
}});

在这个例子中，我们通过layero.find(‘input’)[0].value获取到用户输入的值，并打印出来。注意，这里假设用户输入的是一个字符串。如果用户输入的是数字或者其它类型的数据，你需要根据实际情况来获取和处理这些数据。

四、添加更多按钮及相应回调

除了默认的确定按钮外，layer.prompt还支持添加更多的按钮，并为每个按钮绑定一个回调函数。这样，当用户点击这个按钮时，相应的回调函数就会被执行。

例如：

layer.prompt({
  title: '提示',
  content: '请输入你的名字：',
  success: function(index, layero){
    var userInput = layero.find('input')[0].value; // 获取输入框的值
    console.log(userInput);
  },
  btn: [
    ['确定', function(index, layero){ 
      // 自定义“确定”按钮的回调函数
      console.log('用户点击了确定按钮');
      // 这里可以添加其他逻辑，比如表单验证等
      layer.close(index); // 关闭弹窗
    }],
    ['取消', function(index, layero){
      // 自定义“取消”按钮的回调函数
      console.log('用户点击了取消按钮');
      // 如果返回false，则弹窗不会关闭
      return false;
    }]
  ]
});

在这个例子中，我们添加了“确定”和“取消”两个按钮，并为它们分别绑定了回调函数。当用户点击“确定”按钮时，会打印出用户输入的值并关闭弹窗；当用户点击“取消”按钮时，只会打印出相应的日志信息，而不会关闭弹窗。你可以根据自己的需求来定制这些按钮和回调函数。