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 键盘keyCode键码值表
Dec 24 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
python中global与nonlocal比较
2014/11/21 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python的pstuil模块使用方法总结
2019/07/26 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
python实现简单的五子棋游戏
2020/09/01 Python
财产公证书格式
2014/04/10 职场文书
长城导游词
2015/01/30 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
酒店开业主持词
2015/07/02 职场文书
商业计划书之服装
2019/09/09 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
Golang中异常处理机制详解
2021/06/08 Golang