vue项目中使用vue-layer弹框插件的方法


Posted in Javascript onMarch 11, 2020

vue-layer弹框插件

安装

npm i --save vue-layer

引用

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

参数说明

{
 type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
 title: '信息',
 content: '',
 area: 'auto',
 offset: 'auto',
 icon: -1,
 btn: '确定',
 time: 0,
 shade: true,//是否显示遮罩
 yes: '',
 cancel: '',
 tips: [0,{}],//支持上右下左四个方向,通过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弹框插件的方法的文章就介绍到这了,更多相关vue vue-layer弹框插件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 #Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 #Javascript
Vue事件处理原理及过程详解
Mar 11 #Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 #Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 #Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 #Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 #Javascript
You might like
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
UI Events 用户界面事件
2012/06/27 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
移动端js图片查看器
2016/11/17 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
python实现贪吃蛇游戏
2020/03/21 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
旧时光糖果:Old Time Candy
2018/02/05 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
2014端午节活动策划方案
2014/01/27 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
实习公司领导推荐函
2014/05/21 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
合作协议书模板
2014/10/10 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
国际贸易实训总结
2015/08/03 职场文书
Python实现为PDF去除水印的示例代码
2022/04/03 Python
python区块链持久化和命令行接口实现简版
2022/05/25 Python
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android