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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
Javascript 面向对象之重载
May 04 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
JavaScript隐式类型转换代码实例
May 29 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内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
javascript引用对象的方法
2007/01/11 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
css配合jquery美化 select
2013/11/29 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
django中的HTML控件及参数传递方法
2018/03/20 Python
python实现最速下降法
2020/03/24 Python
Django如何使用redis作为缓存
2020/05/21 Python
python操作redis数据库的三种方法
2020/09/10 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
思想汇报范文
2013/11/04 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
《散步》教学反思
2014/03/02 职场文书
祝酒词范文
2015/08/12 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python