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 removeChild 使用注意事项
Apr 11 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
javascript中indexOf技术详解
May 07 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 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开发注意事项总结
2015/02/04 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
详解原生JS回到顶部
2019/03/25 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python实现线程池代码分享
2015/06/21 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python opencv实现证件照换底功能
2019/08/19 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
Android面试题及答案
2015/09/04 面试题
批评与自我批评范文
2014/10/15 职场文书
毕业生对母校寄语
2015/02/26 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python