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:,time:});//提示框

6,询问框

                    layer.confirm('是否已完成支付?', {//layer弹窗插件
title:"信息",
closeBtn: ,
btn: ['付款成功','付款失败'] //按钮
}, function(){
self.completePay(id);//查询是否支付
layer.closeAll();
},function(){
//...
});

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

上面有各种弹窗的使用示例

在vue中引入layer弹框的简易方法的更多相关文章

  1. vue 中使用 Toast弹框

    import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(ToastPlugin) Vue.use(ConfirmPlugi ...

  2. 关于刷新同级layer弹框的解决方法

    在项目中遇到这种情况: 父页面点击详情,layer.open一个子页面A,子页面里面又存在操作按钮,点击使用parent.layer.open在打开一个子页面B,子页面B点击提交操作成功要刷新子页面A ...

  3. vue中引入mintui、vux重构简单的APP项目

    最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...

  4. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  5. layer弹框在实际项目中的一些应用

    官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,l ...

  6. vue编辑、新增弹框(引用外部页面)

    vue编辑.新增弹框(引用外部页面) 2018年06月15日 09:37:20 会飞的猪biubiu 阅读数 10265    版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...

  7. layer弹框层学习笔记

    这里对layer的笔记只是大概记录一下其使用过程,以便后续使用时快速回顾,更详细使用及介绍参考官网实例.链接在本文末 一 .初步了解layer-弹层之美 layer是一款近年来备受青睐的web弹层组件 ...

  8. 鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  9. vue中引入babel步骤

    vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...

随机推荐

  1. Jmeter之Linux安装(Xshell),分布式运行Linux作为slave机

    甲方爸爸要求,用Linux压测......   所以在公司服务器Linux上搭建Jmeter 但实际一个Jmeter程序也有程序瓶颈~ 所以在Jmeter瓶颈下,搭建分布式压测系统.(也许可以尝试在一 ...

  2. 阿里云语音合成(汉语英语)带UI界面的小程序(python)

    一,项目说明 将汉文转汉语.英文转英语,同时又有逗号<###English###>,<,,,>和句号<...>标志符用于文件处理.其中英文包含在### 英文 ### ...

  3. Unity Button按钮延迟

    1.把下面脚本放到Editor文件夹下,这样脚本继承Button之后,新声明的public变量才能在Inspector面板显示出来. using System.Collections; using S ...

  4. asp.net 3.三层架构

    1.新建项目和类库 CZBK.ItcastProject (空白项目) CZBK.ItcastProject.BLL (类库) -- 逻辑业务 CZBK.ItcastProject.Common (类 ...

  5. winfrom---Window 消息大全

    最近正在捣腾winfrom,遇到了关于window消息这一块的东西,正好在网上看到“微wx笑”的总结. 原文地址:http://blog.csdn.net/testcs_dn/article/deta ...

  6. vue 编译警告 Compiled with 4 warnings

    问题原因: windows下盘符的大小写导致的. 我在cmd里运行的时候,是切换到小写,改成大写的E盘符就没问题了

  7. 9月24日开始发布,主打安全的Librem 5 Linux手机

    曾推出搭载PureOS Linux发行版本Librem笔记本系列的硬件厂商Purism,今天正式宣布了Librem 5 Linux手机的最终和官方发售日期.Librem 5于2017年10月正式发布, ...

  8. String类型为什么不可变

    在学习Java的过程中,我们会被告知 String 被设计成不可变的类型.为什么 String 会被 Java 开发者有如此特殊的对待?他们的设计意图和设计理念到底是什么?因此,我带着以下三个问题,对 ...

  9. Sass的混合-@mixin,@include

    1,无参数,有参数和带默认值参数的@mixin声明sass文件内容: //带参数,默认50@mixin opa($opa:50){ opacity: $opa / 100; filter:alpha( ...

  10. jsfuck-原理

    jsfuck真的fuck,第一眼就是WTF?? Example The following source will do an alert(1): [][(![]+[])[+[]]+([![]]+[] ...