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 相关文章推荐
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
js实现拖拽效果
Feb 12 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
运用js实现图层拖拽的功能
May 24 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
php二分查找二种实现示例
2014/03/12 PHP
PHP反射机制用法实例
2014/08/28 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
firefox下input type="file"的size是多大
2011/10/24 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
Python实现拼接多张图片的方法
2014/12/01 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Django自定义用户认证示例详解
2018/03/14 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
学前教育毕业生自荐信
2013/10/29 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
小学见习报告
2014/10/31 职场文书
布达拉宫导游词
2015/02/02 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书