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. Java EE javax.servlet ServletContainerInitializer接口

    ServletContainerInitializer接口 public interface ServletContainerInitializer 一.介绍 该接口,允许在 web 应用程序的启动阶 ...

  2. Spring实战(十三)Spring事务

    1.什么是事务(Transaction)? 事务是指逻辑上的一组操作,要么全部成功,要么全部失败. 事务是指将一系列数据操作捆绑成为一个整体进行统一管理.如果某一事务执行成功,则该事务中进行的所有数据 ...

  3. 怎样使用 CSS 清除 input 输入框聚焦选中时的蓝色边框?

     input 输入框的聚焦选中时的边框是由 outline 属性控制的, 直接使用: input { outline: none } 即可. 如下:

  4. JavaScript设计模式(单例模式)

    单例模式是一种简单但非常实用的模式,特别是惰性单例技术,在合适的时候才创建对象,并且只创建唯一的一个.下面我们来逐步了解单例模式的用法. 一.简版单例模式: var Singleton = funct ...

  5. 微信小程序上传图片及本地测试

    前端(.wxml) <view id="view1"> <view id="btns"> <image id="ima1 ...

  6. [git] Updates were rejected because the tip of your current branch is behind its remote counterpart.

    场景 $ git push To https://github.com/XXX/XXX ! [rejected] dev -> dev (non-fast-forward) error: fai ...

  7. 使用webpack + momentjs时, 需要注意的问题

    注意开发HTML页面charset, 如是不是utf-8, 比如是shift_jis,  一般会在webpack里用插件EncodingPlugin把开发的utf-8格式转码成shift_jis格式 ...

  8. postgres 表和库等信息大小统计

    一 .数据库大小的统计 1.单个库查询 select pg_database_size('zybdb'); 2.查询所有的库 方法一: select pg_database.datname, pg_s ...

  9. JavaMaven【一、概述&环境搭建】

    课程概述 JavaMaven[一.概述&环境搭建] JavaMaven[二.目录结构&HelloMaven] JavaMaven[三.常用指令] JavaMaven[四.坐标& ...

  10. 第十五章、Python多线程之信号量和GIL

    目录 第十五章.Python多线程之信号量和GIL 1. 信号量(Semaphore) 2. GIL 说明: 第十五章.Python多线程之信号量和GIL 1. 信号量(Semaphore) 信号量用 ...