码迷,mamicode.com
首页 > 其他好文 > 详细

在vue中使用layer弹框

时间:2020-06-09 14:22:55      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:完成   close   alt   操作   any   重要   pre   fir   main   

vue中使用layer弹框

1、npm安装

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(){
                        //...
                    });
技术图片

在vue中使用layer弹框

标签:完成   close   alt   操作   any   重要   pre   fir   main   

原文地址:https://www.cnblogs.com/cbpm-wuhq/p/13072136.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!