詳細介紹layer.prompt函數

一、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值
});

字元串的形式帶有一些默認配置，其中：

• 標題為「請輸入內容」
• 默認輸入框類型為
• 按鈕文字為「確定」
• 按鈕樣式為藍色

用戶輸入完成之後，會執行回調函數，其中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代表，2代表
• 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參數，實現樣式、功能等各種自定義。同時，回調函數的設計，使得輸入框的數據可以動態獲取，從而實現更加複雜的業務邏輯。