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 相关文章推荐
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
JavaScript闭包和回调详解
Aug 09 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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/04/27 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
Vue实现简单分页器
2018/12/29 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
python分割文件的常用方法
2014/11/01 Python
python更改已存在excel文件的方法
2018/05/03 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Python内置函数及功能简介汇总
2020/10/13 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
护理自我鉴定范文
2013/10/06 职场文书
教学大赛获奖感言
2014/01/15 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
居住证明范文
2015/06/17 职场文书
四大名著读书笔记
2015/06/25 职场文书
决心书格式范文
2015/09/23 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
如何在C++中调用Python
2021/05/21 Python