快速使用

1npm install gooclin-layer

• main.js里

1import Vue from 'vue';
2import layer from 'gooclin-layer'
3import 'gooclin-layer/gooclin-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		  //拖动改变大小回调 id弹窗的id
60		  resizeHandMoveEndCallback: id => {
61			console.log('resizeHandMoveEndCallback', id);
62		  }
63		 })
64	}
65  }
66</script>
67
68<style>
69</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   // 浏览器窗口变化是否不需要重新计算
29   isNotReCalcTopAndLeft: false,  //true不需要 false需要
30	 //弹窗成功 id弹窗的id
31	 success:id=>{
32	   console.log("success",id)
33	 },
34	 //弹窗关闭/取消
35	 end:()=>{
36	   console.log("end")
37	 },
38	//还原状态回调 id弹窗的id state：1 是由最小化还原 2是由最大化还原
39	maxminiCallback:(id,state)=>{
40			console.log('maxminiCallback', id,state);
41	},
42	//最小化回调 id弹窗的id
43	miniCallback: id => {
44			console.log('miniCallback', id);
45	},
46	//最大化回调 id弹窗的id
47	maxCallback: id => {
48			console.log('maxCallback', id);
49	},
50	//弹窗关闭/取消之前，id弹窗的id close关闭弹窗, return false阻止关闭  return true不阻止
51	  beforeClose:(id,close)=>{
52		console.log("beforeClose",id)
53		setTimeout(()=>{
54		  close(id)
55		},2000)
56		return false
57	  }
58 }