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 prompt

• alert(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参数自定义