在vue中引入layer彈框的簡易方法

npm i --save layui-layer

2、在main.js中引入

import layer from "layui-layer";

3、然后就可以在各個組件中使用layer了

實例：

layer.confirm('您是如何看待前端開發？', {
            btn: ['重要','奇葩'] //按鈕
        }, function(){
            layer.msg('的確很重要', {icon: 1});
        }, function(){
            layer.msg('也可以這樣', {
                time: 20000, //20s后自動關閉
                btn: ['明白了', '知道了']
            });
        });

4、在項目中使用loading頁

            var loading= layer.load(3, {//請求未成功時出現loading頁 ,3代表一中效果
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });

        layer.close(loading);   //停止loading效果 

 

        　var confirm=layer.confirm('刪除后，作者所選擇【單位序號】數據將被清空，需要重新選擇，是否確定?', {
                    btn: ['確定','取消'] //按鈕
            }, function(){
                self.companyInfoArr.splice(index,1);
                layer.close(confirm);
            },function(){
         });

 5，1.5s后消失的提示框

layer.msg("操作成功!",{icon:1,time:1500});//提示框

6，詢問框

                    layer.confirm('是否已完成支付？', {//layer彈窗插件
                        title:"信息",
                        closeBtn: 0,
                        btn: ['付款成功','付款失敗'] //按鈕
                    }, function(){
                        self.completePay(id);//查詢是否支付
                        layer.closeAll();
                    },function(){
                        //...
                    });

 

 

 

 

官方地址：http://layer.layui.com/

上面有各種彈窗的使用示例