vue-layer修复版vl-layer，一款好用的vue弹窗组件，layui-layer弹窗风格

• 起初使用vue-layer，但是奈何bug太多，作者又没有时间修复，所以只能自己动手修改源码，添加自己想要的功能，修改了图标，索性发布到npm上，这样也能帮到其他想用vue-layer的同学。
• vl-layer github地址
• 原版vue-layer github地址

更新信息

• 2021.04.14 更新： 修复area:["auto","auto"]时，居中问题

快速使用

1npm install vl-layer

• main.js里

1import Vue from 'vue';
2import layer from 'vl-layer'
3import 'vl-layer/vl-layer.css';
4
5Vue.prototype.$layer = layer(Vue);

• vue文件里

1<template>
2  <div id="app">
3  </div>
4</template>
5<script>
6  import world from "@/components/HelloWorld.vue"
7  export default {
8    name: 'App',
9	components:{
10	  world
11	},
12	data() {
13	  return {
14	
15	  };
16	},
17	mounted() {
18		//iframe层并不是真的用了html标签iframe,实质上还是用的div,只是iframe层可以引用自定义组件、页面
19		let layerId = this.$layer.iframe({
20		   title:"提示",
21		   content:{
22		     content:world, //组件
23		     parent:this, //vue实例 传入实例 弹窗组件内才能获取laydata
24		     data:{
25				 a:"这是父组件传值", //父组件向弹窗子组件传值
26				 b:{},
27				 c:function(){}
28			 } 
29		   },
30		   canmove:false,  //true可以拖动 false不能拖动 
31		   //弹窗成功 id弹窗的id
32		   success:id=>{
33		     console.log("success",id)
34		   },
35		   //弹窗关闭/取消
36		   end:()=>{
37		     console.log("end")
38		   },
39		   //弹窗关闭/取消之前，id弹窗的id close关闭弹窗, return false阻止关闭  return true不阻止    
40		  // beforeClose:(id,close)=>{
41		  //   console.log("beforeClose",id)
42		  //   setTimeout(()=>{
43		 //      close(id)
44		 //    },2000)
45		 //    return false
46		 //  },
47		  //还原状态回调 id弹窗的id state：1 是由最小化还原 2是由最大化还原
48		  maxminiCallback:(id,state)=>{
49			console.log('maxminiCallback', id,state);
50		  },
51		  //最小化回调 id弹窗的id
52		  miniCallback: id => {
53			console.log('miniCallback', id);
54		  },
55		  //最大化回调 id弹窗的id
56		  maxCallback: id => {
57			console.log('maxCallback', id);
58		  }
59		 })
60	}
61  }
62</script>
63
64<style>
65</style>

• HelloWorld.vue

1<template>
2  <div calss="HelloWorld"></div>
3</template>
4<script>
5  export default {
6    name: 'HelloWorld',
7	props:{
8		//本弹窗的id
9		layerid:{
10			type:String,
11			default:""
12		},
13		//父组件的data
14		laydata:{
15			type:Object,
16			default:()=>{
17				return {}
18			}
19		},
20		//父组件传值
21		a:{
22			type:String,
23			default:""
24		},
25		b:{
26			type:Object,
27			default:{}
28		},
29		c:{
30			type:Function,
31			default:()=>{}
32		}
33	},
34	data() {
35	  return {
36	
37	  };
38	},
39	mounted() {
40		
41	}
42  }
43</script>
44
45<style>
46</style>

Attribut

-（注意1：信息框，页面层,iframe层,加载层,tips层下各种具体配置参数会有差别，可以看后面各自的配置）

-（注意2：iframe层并不是真的用了html标签iframe,实质上还是用的div,只是iframe层可以引用自定义组件、页面）

1 {
2   type: 0, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
3   title: '信息',
4   content: '', //文本，标签，iframe层可以传递vue组件对象
5   area: 'auto',//['400px','300px'] 
6   offset: 'auto',//[20,10] "rightTop" "rightBottom" "leftTop" "leftBottom" {left:0,top:0}  {left:0,bottom:0}  {right:0,bottom:0} {right:0,top:0}
7   icon: -1,
8   btn: '确定',//[‘确定’，‘取消’]
9   time: 0,
10   shade: true,//是否显示遮罩
11   yes: ()=>{},//确定回调
12   cancel: ()=>{},//取消，右上角x关闭按钮回调
13   tips: [0,{}],//支持上右下左四个方向，通过1-4进行方向设定,可以设定tips: [1, '#c00']
14   tipsMore: false,//是否允许多个tips
15   shadeClose: true,//点击遮罩是否关闭
16   maxmin: true,//开启最大化最小化
17   minBtnOnly:true, //默认false 在  maxmin: true前提下，开启minBtnOnly表示只显示最小化按钮
18   scrollbar: true, //是否允许浏览器出现滚动条:默认是允许
19   resize: false ,//是否允许拉伸，默认是不允许
20   resizeOptions:{
21	   icon:true , //是否显示右下角图标 默认显示 false隐藏
22	   dom:true, //是否开启右下角拉伸 
23	   right:false, //是否开启右边界拉伸 
24	   bottom:false //是否开启底部边界拉伸 
25   },
26   //新增参数
27   canmove:false,  //true可以拖动 false不能拖动
28	 //弹窗成功 id弹窗的id
29	 success:id=>{
30	   console.log("success",id)
31	 },
32	 //弹窗关闭/取消
33	 end:()=>{
34	   console.log("end")
35	 },
36	//还原状态回调 id弹窗的id state：1 是由最小化还原 2是由最大化还原
37	maxminiCallback:(id,state)=>{
38			console.log('maxminiCallback', id,state);
39	},
40	//最小化回调 id弹窗的id
41	miniCallback: id => {
42			console.log('miniCallback', id);
43	},
44	//最大化回调 id弹窗的id
45	maxCallback: id => {
46			console.log('maxCallback', id);
47	},
48	//弹窗关闭/取消之前，id弹窗的id close关闭弹窗, return false阻止关闭  return true不阻止
49	  beforeClose:(id,close)=>{
50		console.log("beforeClose",id)
51		setTimeout(()=>{
52		  close(id)
53		},2000)
54		return false
55	  }
56 }

Method

1 this.$layer.alert(content, [options, yes]);
2 // options和yes可以省略， 如果您不愿意写options，则可以直接写确定按钮的函数，即yes
3 // content 可以为html
4 //yes如果是个function，这会自动添加参数layerid，
5 (layerid)=>{
6   this.$layer.close(layerid);
7 }

1 this.$layer.confirm(content, [options, yes, cancel]);
2  // options，yes和cancel可以省略， 如果您不愿意写options，则可以直接写确定按钮的函数，即yes，或者覆盖默认的cancel方法。PS：yes和cancel方法不能互换
3  //content 可以为html
4   //yes,cancel如果是个function，这会自动添加参数layerid，
5 (layerid)=>{
6   this.$layer.close(layerid);
7 }

1 this.$layer.loading(option);
2  // options ={time:3}，3秒自动关闭
3  //options = {content:'请等待'} //可传入文字

1 this.$layer.msg(content, [options, end]);
2 // options和end可以省略， 如果您不愿意写options，则可以直接写时间到期的回调即可，即end方法
3 // 默认msg的关闭时间为1.5秒
4 // content 可以为html

1 this.$layer.prompt(options, yes);
2 //特殊参数: value 要回显的值
3 //formType: 1text,2password,3textarea

1this.$layer.tips(content, follow, options);
2//content 可以为html
3//follow对css选择器，用来定位目标

1this.$layer.iframe({
2  content: {
3    content: componentName, //传递的组件对象
4    parent: this,//当前的vue对象
5    data:{}//props
6  },
7  area:['800px','600px'],
8  title: 'title'，
9  cancel:()=>{//关闭事件
10     alert('关闭iframe');
11  }
12});
13// data参数可认为是componentName的props，同时 该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接用来关闭该层
14// options参数直接写到json里即可，比如title

1this.$layer.close(layerid);
2this.$layer.closeAll(type); // type:'loading' 'alert' 'confirm' 'msg' 'prompt' 'iframe'
3//弹窗最大化
4this.$layer.full(layerid);
5//弹窗最小化
6this.$layer.min(layerid);
7//还原弹窗
8this.$layer.restore(layerid);
9//弹窗是否可以拖动 true可以 false不能
10this.$layer.canmove(layerid,true)

前端技术交流微信群：

打赏赞助作者，请他喝一杯咖啡：