Layui的layer.confirm弹框用法，很详细

绝地灬酷狼 2024-04-08 13:37 75阅读 0赞

#### Layui的弹框用法 ####

*  一、官网示例
 *  二、自定义一些样式
 *   *  1、自定义标题
     *  2、给提示框内容加上图标
     *  3、定义按钮的位置
     *  4、自定义关闭按钮
     *  5、自定义遮罩
     *  6、自定义点击弹框外遮罩关闭弹框
     *  7、定义唯一弹框
     *  8、自定义弹框出场动画
     *  9、关闭弹框动画
     *  10、设置弹框可以最大或者最小化
     *  11、设置弹框固定
     *  12、是否允许拉伸
     *  13、获取弹框拉伸信息
     *  14、设置浏览器滚动条显示与否
     *  15、定义最大宽度
     *  16、设置最大高度
     *  17、自定义层叠顺序
     *  18、自定义拖拽区域
     *  19、是否允许拖拽到窗口外
     *  20、拖拽完毕后的回调方法
     *  21、tips方向和颜色
     *  22、是否允许多个tips
     *  23、弹框出现后的回调函数

## 一、官网示例 ##

Layui的弹框的官网示例代码

layer.confirm('纳尼？', {
        
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

运行效果是这样的  
![在这里插入图片描述][e5b4864acb2d46859d001ad66d04caa6.png]  
解释：

> “纳尼？”就是弹框的内容  
> “btn”数组中的元素是弹框按钮的内容  
> 标题这里没有填，默认就是“信息”

官网地址：

> https://layuion.com/docs/modules/layer.html\#btn

## 二、自定义一些样式 ##

### 1、自定义标题 ###

就将标题改为“操作提示”，效果是这样的  
![在这里插入图片描述][5a24e3c10ef3439b9548fef261865590.png]  
代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

### 2、给提示框内容加上图标 ###

信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6，试一下传“0”，效果如下：  
![在这里插入图片描述][e262651fcac1463e88d87b0f51c53b40.png]  
看来是个警告图标，代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

上面那个是0的图标样式，因为官网没有明确说明1-6的图标样式，这里就1-6值挨个试一下吧

值为：1  
![在这里插入图片描述][a36735a9efec48839a2a63f3e7a0560e.png]

值为：2  
![在这里插入图片描述][0496785f4fa1496b9733394ee887c08e.png]

值为：3  
![在这里插入图片描述][ffbfc78357e54fd5921823f0207b2222.png]

值为：4  
![在这里插入图片描述][86239f3363484536a43c5439ec3f6d31.png]

值为：5  
![在这里插入图片描述][35f936b3c36f468d911235d5b18ae789.png]

值为：6  
![在这里插入图片描述][f5f6798d91c94650bcec430ac8992e5c.png]

### 3、定义按钮的位置 ###

可以通过“btnAlign”参数定义弹框按钮的位置，“btnAlign”参数值有：l（左对齐）、c（居中对齐）、r （右对齐）,默认是r（右对齐），为了演示明显，这里只用一个按钮演示。  
“btnAlign”参数值为：l ，效果如下：  
![在这里插入图片描述][3db83259a35543aa9b5c0750e758c6c3.png]

“btnAlign”参数值为：l ，效果如下：  
![在这里插入图片描述][950e6b6502bb402b9784f076ade3b20c.png]

“btnAlign”参数值为：l ，也就是默认值，效果如下：  
![在这里插入图片描述][c604feb8fa614feda47452d7210cc645.png]

代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      btn: ['按钮一'],
      btnAlign: "r",
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    });

一般都是默认的，后面就去掉了并还原为3个按钮。

### 4、自定义关闭按钮 ###

我们会发现右上角有一个“×”，这是弹框的关闭按钮。  
![在这里插入图片描述][f9dc5961e147465d994f98676409ed9d.png]  
这个样式也是可以改的，通过“closeBtn”参数进行修改，我这里自定义了，代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

> 有0、1、2三种样式，默认是1，也就是上面那个  
> 0为隐藏，2为其他样式下面演示

值为：0  
![在这里插入图片描述][d95424fac7c84951b7b1a7d9618a5e27.png]

值为：2  
![在这里插入图片描述][190b51b64d5f4fc9aa0d29b4548d61c5.png]

### 5、自定义遮罩 ###

细心的小伙伴会发现，在弹框弹出的时候，除弹框外页面会变黑一点，这是出现弹框前的页面：

![在这里插入图片描述][5ddf6f2eaf964de6a16b86d882aae705.png]

这是出现弹框后的页面：

![在这里插入图片描述][67a3676b640e41cb80e78f45b891b643.png]  
这是通过“shade”进行设置的，我这里也自定义了，代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: 0.3,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

> “shade”默认是0.3，背景是黑色（\#000），可以自定义透明度，改为“1”整个页面除弹框外就全黑了。  
> 也可以自定义遮罩的背景颜色，通过 shade: \[0.8, ‘\#DC143C’\] 进行设置

现在将“shade”值设置为“1”，效果如下：

![在这里插入图片描述][1f4e77e10ebe4b22bf25e2971fef3ee6.png]

将“shade”值设置为“ \[0.8, ‘\#DC143C’\]”，效果如下：  
![在这里插入图片描述][f86d7a7ac2bf4cb0993370f561f1958e.png]

### 6、自定义点击弹框外遮罩关闭弹框 ###

有时候我们需要点击任意位置关闭遮罩和弹框，前提是有弹框和遮罩。可以通过“shadeClose”这个参数来实现。

![在这里插入图片描述][c982058712624a28be87f9990cbe7667.png]

点击除弹框外的任意位置  
![在这里插入图片描述][3516be96b77c4da3814f29883a6372fb.png]

弹框关闭  
![在这里插入图片描述][fb2c360068d641a29727df62d0aded1e.png]  
代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.8, '#DC143C'],
      shadeClose: true,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

> 默认为：false，就是点击弹框遮罩不关闭弹框和遮罩，设置为：true，就是点击弹框遮罩关闭弹框和遮罩。

### 7、定义唯一弹框 ###

可以用“id”这个参数控制唯一弹框，定义唯一的字符串值就行了，同一时间只会出现一个弹框，这个暂时没用过。

代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });
    
    layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "two",
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

这里定义了两个弹框，效果就是看到弹框会闪一下。

### 8、自定义弹框出场动画 ###

可以用“anim”这个参数设置弹框的出场动画。

> “anim”参数值有0-6，默认是0

官网参数：  
![在这里插入图片描述][1c731a7fd26941e2853e416267c0263d.png]

试了一下值为2的效果，因为弹框的出场动画时间较短，这里就没有截效果图，代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      anim: 2,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

### 9、关闭弹框动画 ###

可以通过“isOutAnim”参数设置是否关闭弹框，默认是true，关闭层时会有一个过度动画。也可以将“isOutAnim”设置为false ，即关闭弹框。代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      anim: 2,
      isOutAnim: false,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

### 10、设置弹框可以最大或者最小化 ###

可以通过“maxmin”参数设置弹框全屏或者缩小，默认是false，如果需要弹框最大或者最小化，将参数值设置为true的同时，还要显示地定义弹框的“type”参数，默认值是：0，只对“type”参数值为：1、2有效。

“maxmin”参数值为：true，“type”参数值为：1，效果如下：  
![在这里插入图片描述][30ed2cfd35944c47b6fb6bfb125d77d0.png]

代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      anim: 2,
      isOutAnim: false,
      type: 1,
      maxmin: true,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

“maxmin”参数值为：true，“type”参数值为：2，效果如下：  
![在这里插入图片描述][ac6de0ad1b054e0785bec1d1405d1db5.png]

### 11、设置弹框固定 ###

可以通过“fixed”参数设置弹框在鼠标滚动时是否固定在页面固定位置，默认为：true，设置为：false则是取消固定。

“fixed”参数值为：true，也就是默认的，这里显示地定义了一下，效果如下：  
![在这里插入图片描述][3f637c40f234450faccc8e699b70a4fe.png]  
![在这里插入图片描述][ae23a0b91db545329eaf192512e2764d.png]

代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      anim: 2,
      isOutAnim: false,
      type: 0,
      maxmin: true,
      fixed: true,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

“fixed”参数值为：false

![在这里插入图片描述][f70b30898e7440239b52f92ad4bc03f8.png]  
![在这里插入图片描述][44251c8a4f874032ba05befc91d20f04.png]

### 12、是否允许拉伸 ###

可以通过“resize”参数设置弹框是否支持拉伸，默认值为：true，设置为：false则不允许拉伸。效果如下：  
![在这里插入图片描述][0e81cb5c891443099c28c311d1512fdf.png]

这里显示地设置了一下“resize”参数，代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      anim: 2,
      isOutAnim: false,
      type: 0,
      maxmin: true,
      fixed: true,
      resize: true,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

参数值为：false，则不能拉伸弹框。

### 13、获取弹框拉伸信息 ###

可以通过“resizing”参数获取弹框的拉伸信息，参数值是一个function函数，注意要拉伸后才会触发，效果如下：  
未拉伸：  
![在这里插入图片描述][30a82c5b1cd14d40856902e5a0416fc4.png]

拉伸之后：  
![在这里插入图片描述][22fd396997b24c80a998bc59c6bd410c.png]

代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      anim: 2,
      isOutAnim: false,
      type: 0,
      maxmin: true,
      fixed: true,
      resize: true,
      resizing: function(val) {
        
        console.log("val", val);
      },
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

拉伸之后需要做什么在function函数中操作就好了。

### 14、设置浏览器滚动条显示与否 ###

可以通过“scrollbar”参数设置浏览器滚动条显示与否，默认为：true，设置为：false ，弹框弹出之后滚动条就不显示了，效果如下：  
未出现弹框之前：  
![在这里插入图片描述][6637c53c4c934da48a16ea49d0b2e67e.png]

出现弹框之后：  
![在这里插入图片描述][737d7d8132ef4b8488a60c4cdf21b5f5.png]

代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      anim: 2,
      isOutAnim: false,
      type: 0,
      maxmin: true,
      fixed: true,
      resize: true,
      resizing: function(val) {
        
        console.log("val", val);
      },
      scrollbar: false,  
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

### 15、定义最大宽度 ###

官网上说“maxWidth”参数可以设置最大宽度  
![在这里插入图片描述][0d6d8f6808eb4f2eab9386a22f05b0cd.png]

可能我设置得不对，设置完可以的时候没有看到效果，弹框还是可以拉得很宽，效果如下：  
![在这里插入图片描述][5b8c55d8404c4375a756ce86097c0f7a.png]

代码如下：

layer.confirm('纳尼？', {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      anim: 2,
      isOutAnim: false,
      type: 0,
      maxmin: true,
      fixed: true,
      resize: true,
      resizing: function(val) {
        
        console.log("val", val);
      },
      scrollbar: true,
      area: 'auto',
      maxWidth: 10,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

### 16、设置最大高度 ###

可以通过“maxHeight”参数设置弹框的最大高度，设置了之后弹框会出现点击下拉条，拉伸弹框超过设置最大高度，点击下拉条就会消失，效果如下：  
没有设置最大高度：  
![在这里插入图片描述][0d1e3bb8f66e47e1a8d295f9308f86b8.png]

设置最大高度为：10，也就是“maxHeight”参数值为：10  
![在这里插入图片描述][cee3d1974bfe4058a0726d902e77a0d6.png]  
拉伸  
![在这里插入图片描述][2907be0494bc45838ba631da77467da2.png]

拉伸超过最大宽度  
![在这里插入图片描述][3fa6bf21f44040999d0cfc51baf004e9.png]  
代码如下：

layer.confirm("默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽", {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      anim: 2,
      isOutAnim: false,
      type: 0,
      maxmin: true,
      fixed: true,
      resize: true,
      resizing: function(val) {
        
        console.log("val", val);
      },
      scrollbar: true,
      area: 'auto',
      maxWidth: 10,
      maxHeight: 100,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

### 17、自定义层叠顺序 ###

可以通过“zIndex”参数定义层叠顺序，默认值为：19891014 ，也就是在所有组件的最前面，一般用于解决和其它组件的层叠冲突。  
这里显示地定义了一下“zIndex”参数。效果如下：  
![在这里插入图片描述][c3d8ef854fd2498099f07e9184b98846.png]

定义“zIndex”参数值为：-1，效果如下：  
![在这里插入图片描述][503d1263186848c39f380c0667ec18a1.png]

定义“zIndex”参数值为：-999，效果如下：  
![在这里插入图片描述][2a4a6640163f4ac4860e25a77303a347.png]  
我们会发现不能点击弹框了，这是因为弹框在所有组件的下面。

代码如下：

layer.confirm("纳尼？", {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      anim: 2,
      isOutAnim: false,
      type: 0,
      maxmin: true,
      fixed: true,
      resize: true,
      resizing: function(val) {
        
        console.log("val", val);
      },
      scrollbar: true,
      area: 'auto',
      maxWidth: 10,
      zIndex: -999,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

### 18、自定义拖拽区域 ###

可以通过“move”参数设置自定义拖拽区域，默认值为：‘.layui-layer-title’，就是从标题区域拖拽弹框，如果你想单独定义，指向元素的选择器或者DOM即可（这里我没有试）。如move: ‘.mine-move’。你还配置设定“move”参数值为: false 来禁止拖拽。

“move”参数为：false，效果如下：  
![在这里插入图片描述][8dc5d4b6f84f4b228754ce32084613bc.png]  
拖动弹框的时候发现拖动不了。代码如下：

layer.confirm("纳尼？", {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      anim: 2,
      isOutAnim: false,
      type: 0,
      maxmin: true,
      fixed: true,
      resize: true,
      resizing: function(val) {
        
        console.log("val", val);
      },
      scrollbar: true,
      area: 'auto',
      maxWidth: 10,
      zIndex: 19891014,
      move: false,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

如果要恢复标题拖拽，将“move”参数移除就行了。

### 19、是否允许拖拽到窗口外 ###

可以通过“moveOut”参数设置弹框是否允许拖拽到窗口外，默认值为：false，即不能拖拽到窗口外。  
拖拽效果如下：  
![在这里插入图片描述][9c12c8df4dda4431b85258609697009f.png]  
可以发现拖拽到边缘就不能拖动了。

“moveOut”参数值为：true，效果如下：  
![在这里插入图片描述][cda75df6d698425c9531279aa4479a4c.png]

代码如下：

layer.confirm("纳尼？", {
        
      title: "操作提示",
      icon: 0,
      closeBtn: 2,
      shade: [0.3, '#000'],
      shadeClose: true,
      id: "one",
      anim: 2,
      isOutAnim: false,
      type: 0,
      maxmin: true,
      fixed: true,
      resize: true,
      resizing: function(val) {
        
        console.log("val", val);
      },
      scrollbar: true,
      area: 'auto',
      maxWidth: 10,
      zIndex: 19891014,
      moveOut: true,
      btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
      ,btn3: function(index, layero){
        
        //按钮【按钮三】的回调
      }
    }, function(index, layero){
        
      //按钮【按钮一】的回调
    }, function(index){
        
      //按钮【按钮二】的回调
    });

### 20、拖拽完毕后的回调方法 ###

可以用“moveEnd”参数获取触发事件，默认值为：null，没有定义是不会触发的，定义后在移动弹框后触发。效果如下：  
弹框没有移动  
![在这里插入图片描述][7be07a2759014e90a09af3f0162b5c89.png]

拖拽弹框  
![在这里插入图片描述][2b9fc847a61548229a85208d442b1b9c.png]

代码如下：

layer.confirm("纳尼？", {
        
         title: "操作提示",
         icon: 0,
         closeBtn: 2,
         shade: [0.3, '#000'],
         shadeClose: true,
         id: "one",
         anim: 2,
         isOutAnim: false,
         type: 0,
         maxmin: true,
         fixed: true,
         resize: true,
         resizing: function(val) {
        
             // console.log("val", val);
         },
         scrollbar: true,
         area: 'auto',
         maxWidth: 100,
         zIndex: 19891014,
         moveOut: false,
         moveEnd: function(val) {
        
             console.log("moveEnd", val);
         },
         btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
         ,btn3: function(index, layero){
        
             //按钮【按钮三】的回调
         }
     }, function(index, layero){
        
         //按钮【按钮一】的回调
     }, function(index){
        
         //按钮【按钮二】的回调
     });

### 21、tips方向和颜色 ###

官网上说“tips”参数是tips层的私有参数。  
![在这里插入图片描述][f4af74b677ac4b13b09e963a3a2bb768.png]  
但我设置参数为：1、2、3、4、\[1, ‘\#c00’\] 都没有看到弹框有什么效果。知道的小伙伴麻烦在评论区吱一声。

### 22、是否允许多个tips ###

这个参数我设置之后也没有看到弹框效果，官网描述：  
![在这里插入图片描述][ae87cd022a7040deb7a8e5b0688bd7a7.png]

### 23、弹框出现后的回调函数 ###

可以通过“success”参数获取弹框出现之后的回调，默认值为：null，看看弹框成功出现之后有什么，效果如下：  
![在这里插入图片描述][b468d54ababc47d392df26620fe06e27.png]  
代码如下：

[e5b4864acb2d46859d001ad66d04caa6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/e7b6acb4cf30403cbbe2150fd8a77f2b.png
[5a24e3c10ef3439b9548fef261865590.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/44ed8715cab04533a9e25f9b72b3972e.png
[e262651fcac1463e88d87b0f51c53b40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/8516df02d8604a518bc576df9d16466f.png
[a36735a9efec48839a2a63f3e7a0560e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/0f46d0ac6f404b1181094edeb18427b5.png
[0496785f4fa1496b9733394ee887c08e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/5c57b321247d4e04bf46a2237202186d.png
[ffbfc78357e54fd5921823f0207b2222.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/8d72a6d5722542828330eb2aedfa3f1d.png
[86239f3363484536a43c5439ec3f6d31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/1bc5fd5d5e564d98befae8a5e95acfa4.png
[35f936b3c36f468d911235d5b18ae789.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/4211e32cadad41729aff61872cf790e2.png
[f5f6798d91c94650bcec430ac8992e5c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/99eb945047b7439784ba8e1507cfbae7.png
[3db83259a35543aa9b5c0750e758c6c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/5e71a89eebf843aaba38ae90578ea12a.png
[950e6b6502bb402b9784f076ade3b20c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/6c11b1e31caf4f4ca78cb8e9b7d68c74.png
[c604feb8fa614feda47452d7210cc645.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/480518c7467b4cb7b6882d2617c50f8c.png
[f9dc5961e147465d994f98676409ed9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c9ca4867ef89464d8ca91688d2d6c283.png
[d95424fac7c84951b7b1a7d9618a5e27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/7473e9a3f4db431791effd53760bf952.png
[190b51b64d5f4fc9aa0d29b4548d61c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/560489655d37481a89ae5435f4c7f001.png
[5ddf6f2eaf964de6a16b86d882aae705.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/579102de3d494312adb7585f6147ff25.png
[67a3676b640e41cb80e78f45b891b643.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/9b05296eda63461485c68f689e4b02ca.png
[1f4e77e10ebe4b22bf25e2971fef3ee6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/be748d65b4cb49388cffc49dd3545bc2.png
[f86d7a7ac2bf4cb0993370f561f1958e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ef47124c0c974c34b149421701781b8f.png
[c982058712624a28be87f9990cbe7667.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ce57e07866c14dd7ade2ab3aa36a2d2a.png
[3516be96b77c4da3814f29883a6372fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/7d83767b6ff047c0ac28ad067e931457.png
[fb2c360068d641a29727df62d0aded1e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/4cb026d265f64dc9bf863f222e9083b3.png
[1c731a7fd26941e2853e416267c0263d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/613cbc1192914b8ab998e193f68f055a.png
[30ed2cfd35944c47b6fb6bfb125d77d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ac6ed485b994472ca81465b7ff71a2fa.png
[ac6de0ad1b054e0785bec1d1405d1db5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/44ce828c7cef47a8bdb17cd1625ef897.png
[3f637c40f234450faccc8e699b70a4fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/5bcc872b19514b9baa0cf6ef6c57da24.png
[ae23a0b91db545329eaf192512e2764d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/19f27b5867a64f7fb51d87899bf0add1.png
[f70b30898e7440239b52f92ad4bc03f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/d9b388f99a39465682a5e4f1b0e2d998.png
[44251c8a4f874032ba05befc91d20f04.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/377040a900bb4c5987f57ea34b77ef0b.png
[0e81cb5c891443099c28c311d1512fdf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/6b70e092e2354dacbae93e4edc7871a2.png
[30a82c5b1cd14d40856902e5a0416fc4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/fa35bd40d01846a2921196152acc1091.png
[22fd396997b24c80a998bc59c6bd410c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/54473d619c5042ce97e0f743998477ac.png
[6637c53c4c934da48a16ea49d0b2e67e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/7557a41f395b4e1a97b92ffdea20f432.png
[737d7d8132ef4b8488a60c4cdf21b5f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/85663d7247b448e9ad4d1f5ec0565e93.png
[0d6d8f6808eb4f2eab9386a22f05b0cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ea8ff894186642aeba9e7ba894550eec.png
[5b8c55d8404c4375a756ce86097c0f7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/067a6639574e48018780f6b013feeb91.png
[0d1e3bb8f66e47e1a8d295f9308f86b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/e9432821106a4c4fb57bd7d445a54896.png
[cee3d1974bfe4058a0726d902e77a0d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/2ed9e38f21dd439498fbd0094aff2f24.png
[2907be0494bc45838ba631da77467da2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/608896585c294845932aebf46e931e12.png
[3fa6bf21f44040999d0cfc51baf004e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/89f15c5a47fe4ae0b2e49c172272b40b.png
[c3d8ef854fd2498099f07e9184b98846.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/7f7c2e33c1784cb7852d7a280e7da496.png
[503d1263186848c39f380c0667ec18a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/844cdab2b048448cb7c4a785b881fdbd.png
[2a4a6640163f4ac4860e25a77303a347.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/70ce809707bd429baf400873722c0f46.png
[8dc5d4b6f84f4b228754ce32084613bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/2021a90b4e654b0d82eae9073a96ee26.png
[9c12c8df4dda4431b85258609697009f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/261a5470a427442fba417ad110137e5d.png
[cda75df6d698425c9531279aa4479a4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/318abca93ef04cf88eb1b2296ce7551e.png
[7be07a2759014e90a09af3f0162b5c89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/48698c0a41e34b21bfa7995fa68c1926.png
[2b9fc847a61548229a85208d442b1b9c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/21e9cd4703064fbdbc2676be8f8d8a96.png
[f4af74b677ac4b13b09e963a3a2bb768.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/9d0422ce397a4748bc8e8d4ca8c6e578.png
[ae87cd022a7040deb7a8e5b0688bd7a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/dfa0f7dae0c0431c950b5510452de7cf.png
[b468d54ababc47d392df26620fe06e27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/38886ec17e7c419785d6742ffd76994f.png