详细介绍layer.prompt函数

发布时间：2023-05-21

一、layer.prompt的作用与基本用法

layer.prompt是一个弹出层插件，主要用于输入文字或其他内容。它可以让用户在页面上方显示一个输入框或自定义弹窗，来进行用户输入。它是layui框架中的一个基础函数，调用方法如下：

<script>
    layer.prompt([options,] callback);
</script>

其中，第一个参数是选项，非必填；第二个参数是回调函数，必填。options参数可以是一个字符串，可以是一个对象。而callback则是用户输入完成后的回调函数。

二、使用字符串作为options参数

当使用字符串作为options参数传入layer.prompt函数时，可以使用：

layer.prompt('请输入内容', function(value, index, elem){
  console.log(value); //得到value值
});

字符串的形式带有一些默认配置，其中：

  • 标题为“请输入内容”
  • 默认输入框类型为<input type="text" />
  • 按钮文字为“确定”
  • 按钮样式为蓝色 用户输入完成之后，会执行回调函数，其中value是用户输入的值，index是弹出框的索引，elem是当前prompt弹出框的DOM元素。

三、使用对象作为options参数

当使用对象作为options参数传入layer.prompt函数时，可以自定义更多的配置项。例如，可以设置输入框类型、按钮样式、按钮文字、输入框初始值等。 下面我们给出一个options对象示例：

let options = {
  title:'请输入内容',
  value:'默认值',
  formType:2,
  btn:['提交','取消'],
  btn1:function(value, index, elem){
    console.log(value); //按钮提交的回调
  },
  btn2:function(value, index, elem){
    layer.close(index); //按钮取消的回调
  }
};
layer.prompt(options, function(value, index, elem){
  console.log(value);
});

以上options对象的各个属性解释如下：

  • title：弹出框标题，默认值为“请输入内容”
  • value：输入框的初始值，默认为空字符串
  • formType：输入框类型，1代表<input type="text" />，2代表<textarea></textarea>
  • btn：数组类型，长度为2，分别代表两个按钮的文字
  • btn1：按钮1回调函数，用户点击“提交”按钮时触发
  • btn2：按钮2回调函数，用户点击“取消”按钮或使用ESC键时触发 同样，当用户输入完成后，回调函数中的value是用户输入的值，index是弹出框的索引，elem是当前prompt弹出框的DOM元素。

四、支持自定义弹窗

除了输入框之外，layer.prompt也支持自定义弹窗，以满足一些特殊的需求。可以在options参数中通过content属性进行设置。示例代码如下：

let options = {
  title:'自定义弹窗',
  content:'<div><h3>这是自定义弹窗</h3></div>',
  btn:['提交','取消'],
  btn1:function(value, index, elem){
    console.log(value); //按钮提交的回调
  },
  btn2:function(value, index, elem){
    layer.close(index); //按钮取消的回调
  }
};
layer.prompt(options, function(value, index, elem){
  console.log(value);
});

以上代码中，content参数是弹窗的内容。这里使用了一个div标签和一个h3标签作为内容。用户可以根据实际需求自定义各种各样的HTML元素作为输入弹窗的内容。

五、小结

以上是介绍layer.prompt函数的各种用法。layer.prompt作为layui框架中的一个基础函数，为用户提供了一种快速简单的输入框解决方案。用户可以根据自己的实际需求，通过传递不同的options参数，实现样式、功能等各种自定义。同时，回调函数的设计，使得输入框的数据可以动态获取，从而实现更加复杂的业务逻辑。

推荐文章