快速使用

npm install gooclin-layer

• main.js里

import Vue from 'vue';
import layer from 'gooclin-layer'
import 'gooclin-layer/gooclin-layer.css';

Vue.prototype.$layer = layer(Vue);

• vue文件里

<template>
  <div id="app">
  </div>
</template>
<script>
  import world from "@/components/HelloWorld.vue"
  export default {
    name: 'App',
	components:{
	  world
	},
	data() {
	  return {
	
	  };
	},
	mounted() {
		//iframe层并不是真的用了html标签iframe,实质上还是用的div,只是iframe层可以引用自定义组件、页面
		let layerId = this.$layer.iframe({
		   title:"提示",
		   content:{
		     content:world, //组件
		     parent:this, //vue实例 传入实例 弹窗组件内才能获取laydata
		     data:{
				 a:"这是父组件传值", //父组件向弹窗子组件传值
				 b:{},
				 c:function(){}
			 } 
		   },
		   canmove:false,  //true可以拖动 false不能拖动 
		   //弹窗成功 id弹窗的id
		   success:id=>{
		     console.log("success",id)
		   },
		   //弹窗关闭/取消
		   end:()=>{
		     console.log("end")
		   },
		   //弹窗关闭/取消之前，id弹窗的id close关闭弹窗, return false阻止关闭  return true不阻止    
		  // beforeClose:(id,close)=>{
		  //   console.log("beforeClose",id)
		  //   setTimeout(()=>{
		 //      close(id)
		 //    },2000)
		 //    return false
		 //  },
		  //还原状态回调 id弹窗的id state：1 是由最小化还原 2是由最大化还原
		  maxminiCallback:(id,state)=>{
			console.log('maxminiCallback', id,state);
		  },
		  //最小化回调 id弹窗的id
		  miniCallback: id => {
			console.log('miniCallback', id);
		  },
		  //最大化回调 id弹窗的id
		  maxCallback: id => {
			console.log('maxCallback', id);
		  },
		  //拖动改变大小回调 id弹窗的id
		  resizeHandMoveEndCallback: id => {
			console.log('resizeHandMoveEndCallback', id);
		  }
		 })
	}
  }
</script>

<style>
</style>

• HelloWorld.vue

<template>
  <div calss="HelloWorld"></div>
</template>
<script>
  export default {
    name: 'HelloWorld',
	props:{
		//本弹窗的id
		layerid:{
			type:String,
			default:""
		},
		//父组件的data
		laydata:{
			type:Object,
			default:()=>{
				return {}
			}
		},
		//父组件传值
		a:{
			type:String,
			default:""
		},
		b:{
			type:Object,
			default:{}
		},
		c:{
			type:Function,
			default:()=>{}
		}
	},
	data() {
	  return {
	
	  };
	},
	mounted() {
		
	}
  }
</script>

<style>
</style>

Attribut

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

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

 {
   type: 0, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
   title: '信息',
   content: '', //文本，标签，iframe层可以传递vue组件对象
   area: 'auto',//['400px','300px'] 
   offset: 'auto',//[20,10] "rightTop" "rightBottom" "leftTop" "leftBottom" {left:0,top:0}  {left:0,bottom:0}  {right:0,bottom:0} {right:0,top:0}
   icon: -1,
   btn: '确定',//[‘确定’，‘取消’]
   time: 0,
   shade: true,//是否显示遮罩
   yes: ()=>{},//确定回调
   cancel: ()=>{},//取消，右上角x关闭按钮回调
   tips: [0,{}],//支持上右下左四个方向，通过1-4进行方向设定,可以设定tips: [1, '#c00']
   tipsMore: false,//是否允许多个tips
   shadeClose: true,//点击遮罩是否关闭
   maxmin: true,//开启最大化最小化
   minBtnOnly:true, //默认false 在  maxmin: true前提下，开启minBtnOnly表示只显示最小化按钮
   scrollbar: true, //是否允许浏览器出现滚动条:默认是允许
   resize: false ,//是否允许拉伸，默认是不允许
   resizeOptions:{
	   icon:true , //是否显示右下角图标 默认显示 false隐藏
	   dom:true, //是否开启右下角拉伸 
	   right:false, //是否开启右边界拉伸 
	   bottom:false //是否开启底部边界拉伸 
   },
   //新增参数
   canmove:false,  //true可以拖动 false不能拖动
	 //弹窗成功 id弹窗的id
	 success:id=>{
	   console.log("success",id)
	 },
	 //弹窗关闭/取消
	 end:()=>{
	   console.log("end")
	 },
	//还原状态回调 id弹窗的id state：1 是由最小化还原 2是由最大化还原
	maxminiCallback:(id,state)=>{
			console.log('maxminiCallback', id,state);
	},
	//最小化回调 id弹窗的id
	miniCallback: id => {
			console.log('miniCallback', id);
	},
	//最大化回调 id弹窗的id
	maxCallback: id => {
			console.log('maxCallback', id);
	},
	//弹窗关闭/取消之前，id弹窗的id close关闭弹窗, return false阻止关闭  return true不阻止
	  beforeClose:(id,close)=>{
		console.log("beforeClose",id)
		setTimeout(()=>{
		  close(id)
		},2000)
		return false
	  }
 }