Nine Parsecs from Milwaukee

    gooclin-layer

    0.1.34 • Public • Published

    快速使用

    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
    	  }
     }

    Install

    npm i gooclin-layer

    DownloadsWeekly Downloads

    0

    Version

    0.1.34

    License

    MIT

    Unpacked Size

    279 kB

    Total Files

    7

    Last publish

    Collaborators

    • lifizer