vue-como-layer
v1.0.7
Published
本插件是主要适用场景为中后台管理界面,提供与layui模块下的layer 保持95%的相似度
Downloads
8
Maintainers
Readme
vue-como-layer
- 本插件是主要适用场景为中后台管理界面,提供与layui模块下的layer 保持95%的相似度
- 本插件可自定义主题 ,只需要实现cus-layer-dialog 类名下的相关css即可
- 插件是基于element ui编写的,使用时需要依赖element ui
/*自定义头部样式 从1.0.1后不建议*/
.cus-layer-dialog .layer-dialog-content .layer-content-title{
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
/*自定义主体样式*/
.cus-layer-dialog .layer-dialog-content .layer-content-main{
}
/*自定义底部样式*/
.cus-layer-dialog .layer-dialog-content .layer-content-footer{
}
安装
npm install vue-como-layer
使用
一、全局引入
- 在main.js中引入
import vueComoLayer from 'vue-como-layer';
imoort 'vue-como-layer/vue-como-layer.css';
//Vue.use(vueComoLayer);
//默认是 Vue.prototype.$comolayer = layer;
//可自定义
Vue.prototype.$layer = vueComoLayer
二、独立引入
- 在组件或页面中直接引入
//请在main.js中全局引入css样式
imoort 'vue-como-layer/vue-como-layer.css';
import layer from 'vue-como-layer';
三、按需引入
//请在main.js中全局引入css样式
imoort 'vue-como-layer/vue-como-layer.css';
import {Alert} from 'vue-como-layer';
import {Iframe} from 'vue-como-layer';
编译
npm run vue-como-layer
接口
- options是一个object对象 ,属性包括,所有callback都会回调弹出层的ID 可根据ID关闭弹出层 也可以closeAll全部关闭
{
shadeClose:false,//点击遮尘罩是否关闭弹出层
closeBtn:true, //弹出层是否显示关闭按钮
shade:false, //是否显示遮尘罩
title:'信息', //弹出层标题
content:'', //弹出层内容 可以是text html vue组件
btn:[], //按钮组
maxmin:false, //是否开启最大化 未实现最小化
area:'auto', //弹出层大小 示例 ['800px','auto'] ['800px']
icon:-1, //弹出层图标 0提醒 1成功 2错误 3询问
offset:'auto', //偏移量 默认垂直和水平居中 示例:['100px']
time:3, //msg api关闭时间
zIndex:1000, //层级 建议不要手动传此参数 插件会根据层级多少自动计算 在必要的时请传入
btnTypes:['primary','','','',''], //按钮样式,依赖于element ui 的buttom组件样式 写了几个可以传入几个
show:false //凡调用弹出层组件强制是true
title_color:'' //头部背景颜色
}
open(options)
原始核心方法,可根据自己需要定制自己通用的弹出层 如tab promptalert(message,options,callback)
普通信息框 建议传入icon,shade、closeBtn,title参数confirm(message,options,yes,cancel)
询问框 建议传入icon,shade、closeBtn参数msg(message,options,callback)
提示框 建议传入icon,shade、title参数 callback是到时间了关闭后回调close(index)
关闭单个弹出层 index是弹出层ID 可以在打开弹出层时获取 也可以在所有回调函数中获取closeAll()
关闭所有弹出层iframe(content,options,componentParams={})
content请直接传入vue组件即可 请注意 此组件没有传入btn无效,请在子组件是实现关闭等操作 componentParams是组件参数 可在组件是定义props:{params:{type:Object}}
接收此参数
更新日志
2020年10月3日
- 修复了弹出层的动画样式的bug
- 修复了弹出层高度的设置的bug
- 修复了弹出层的超出高度的滚动条样式 兼容webkit和firefox
- 待办事项:未提交npm新版本,需要提交一次
2020年10月17日
- 增加iframe组件传递参数,修复弹出层居中的问题
- 改进遮尘罩的弹出顺序
2020年10月19日
- 修复弹出层延迟的bug
2020年12月12日
- 增加头部颜色参数,增加shade参数自定义