vue-layer弹框插件 

安装

npm i --save vue-layer

引用

import layer from 'vue-layer'
Vue.prototype.$layer = layer(Vue);

参数说明

{
type: , //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
title: '信息',
content: '',
area: 'auto',
offset: 'auto',
icon: -,
btn: '确定',
time: ,
shade: true,//是否显示遮罩
yes: '',
cancel: '',
tips: [,{}],//支持上右下左四个方向,通过1-4进行方向设定,可以设定tips: [1, '#c00']
tipsMore: false,//是否允许多个tips
shadeClose: true,//点击遮罩是否关闭
}

方法

 layer.alert(content, [options, yes]);
// options和yes可以省略, 如果您不愿意写options,则可以直接写确定按钮的函数,即yes
// content 可以为html
layer.confirm(content, [options, yes, cancel]);
// options,yes和cancel可以省略, 如果您不愿意写options,则可以直接写确定按钮的函数,即yes,或者覆盖默认的cancel方法。PS:yes和cancel方法不能互换
//content 可以为html
layer.msg(content, [options, end]);
// options和end可以省略, 如果您不愿意写options,则可以直接写时间到期的回调即可,即end方法
// 默认msg的关闭时间为1.5秒
// content 可以为html
layer.tips(content, follow, options);
//content 可以为html
//follow对css选择器,用来定位目标
layer.iframe({
content: {
content: componentName, //传递的组件对象
parent: this,//当前的vue对象
data:{}//props
},
area:['800px','600px'],
title: 'title'
});
// data参数可认为是componentName的props,同时 该方法会自动添加一个key为layerid的值, 该值为创建层的id, 可以直接用来关闭该层
// options参数直接写到json里即可,比如title
layer.open(options);
layer.close(id);
layer.closeAll(type);

其它说明

该包的css都为vl-notice开头, 需要重写css样式,覆盖即可

vue项目中使用vue-layer弹框插件的更多相关文章

  1. 如何去除vue项目中的 # — vue路由的History模式

    前言 在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头. 添加 mode: 'history' 之后将使用 HTML5 his ...

  2. layer弹框插件使用

    需要在jquery之后导入 <link rel="stylesheet" href="${pageContext.request.contextPath }/js/ ...

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

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

  4. 实现在vue中element-ui的el-dialog弹框拖拽

    参考:实现在vue中element-ui的el-dialog弹框拖拽 1.在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogD ...

  5. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  6. 在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  7. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  8. 如何在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...

  9. vue项目中使用组件化开发

    最近在使用vue-cli结合webpack打包工具开发一个后台管理系统,使用vue难免需要运用组件化思想,而这也正是vue的一大特点. 在之前做的vue项目中,稍微有一点组件化的思想,可能是对组件化不 ...

随机推荐

  1. 自定义Ribbon的负载均衡策略

    自定义负载均衡策略 官方文档指出:自定义的负载均衡配置类不能放在 @componentScan 所扫描的当前包下及其子包下,否则我们自定义的这个配置类就会被所有的Ribbon客户端所共享,也就是说我们 ...

  2. vux scroller在iOS13上,一停止滑动就跳到顶部

    转载:https://blog.csdn.net/sllailcp/article/details/102502452 今天客户反馈的问题,说在最新版的iOS上(iOS13),滑动列表,滑完就会跳到顶 ...

  3. 【剑指offer】剪绳子

    题目描述 给你一根长度为n的绳子,请把绳子剪成m段(m.n都是整数,n>1并且m>1),每段绳子的长度记为k[0],k[1],...,k[m].请问k[0]xk[1]x...xk[m]可能 ...

  4. 怎么用命令行把apk安装到移动设备上?

    1.移动设备通过USB连接电脑 2.执行命令adb install [apk文件的路径]

  5. LaTeX 小试牛刀

    跟大家分享一下正式第一次使用 LaTex 的经验,之前数学建模的时候一直想用,但没有找到合适的软件.前段时间,实验室老师让我帮忙套个 IEEE ACCESS 的模板. 尝试过 TexPad,的确 UI ...

  6. mysql获取某个字段平均值方法AVG函数的使用

    直接上脚本 ,)) AS 平均分 FROM students WHERE sex= '男' 其中,特别说明一下CAST关键字 CAST(字段名 as 要转换的类型) #其中,可以转换的类型为: CHA ...

  7. 『异或粽子 堆 可持久化trie』

    异或粽子 Description 小粽是一个喜欢吃粽子的好孩子.今天她在家里自己做起了粽子. 小粽面前有 n 种互不相同的粽子馅儿,小粽将它们摆放为了一排,并从左至右编号为 1 到 n.第 i 种馅儿 ...

  8. eclipse的debug模式的F5,F6按键失灵

    在使用eclipse Mars.1 Release (4.5.1)开发过程中,发现debug模式下的快捷键无法使用,全部失效了.秉持坚决自己解决绝不求人的态度我艰苦的在度娘上寻求解决办法,有的说是快捷 ...

  9. Linux学习笔记之文件读取过程

    0x00 概述 对于Linux系统来说,一切的数据都起源于磁盘中存储的文件.Linux文件系统的结构及其在磁盘中是如何存储的?操作系统是怎样找到这些文件进行读取的?这一章主要围绕这几个问题进行介绍(以 ...

  10. ABP 执行sql语句

    由于业务繁琐,用EF比较麻烦,需要用到sql语句,然后网上找了很久,找到的例子都是老版本的,新版本有先声明已经去掉,不能用了 在这里做个小记 首先注入实例 private readonly IDbCo ...