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实现自定义风格的滑动条实现代码
Apr 26 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
jQuery操作cookie
Aug 08 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 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 filter_var() 函数 Filter 函数
2012/04/25 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
php简单复制文件的方法
2016/05/09 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
js URL参数的拼接方法比较
2012/02/15 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
jquery选择器使用详解
2014/04/08 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
python实现简单猜单词游戏
2020/12/24 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
New delete 与malloc free 的联系与区别
2013/02/04 面试题
高中生的学习总结自我鉴定
2013/10/26 职场文书
清洁工表扬信
2014/01/08 职场文书
生产部岗位职责范文
2014/02/07 职场文书
李白故里导游词
2015/02/12 职场文书
上下班时间调整通知
2015/04/23 职场文书
公司备用金管理制度
2015/08/04 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
数据库连接池
2021/04/06 MySQL