Vue-como-layer NPM

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}}接收此参数