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 操作文件 实现方法小结
Jul 02 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 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
linux下为php添加curl扩展的方法
2011/07/29 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
如何使用python切换hosts文件
2020/04/29 Python
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
软件测试企业面试试卷
2016/07/13 面试题
学校搬迁方案
2014/06/15 职场文书
经营理念标语
2014/06/21 职场文书
财会专业大学生求职信
2014/09/26 职场文书
公司人力资源管理制度
2015/08/05 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android