简介

Util.open()我们使用的最多、最频繁的组件-弹窗组件;
我们弹窗组件是基于vue-layer组件来封装的(细一点说是用vue-layer里面的iframe方法)。
你可以查看这个js里面的open方法看源码(jpaas_sources/jpaas-web/jpaas-commons/src/assets/util.js)
也可以看我的示例页面(这里面是vue-layer的用法):jpaas_sources/jpaas-web/jpaas-commons/src/my-layer.vue
也可以查看vue-layer文档:https://www.npmjs.com/package/vue-layer
虽然是用的vue-layer封装的,但有些东西可能会有些差异,所以建议看Util.js里面的open方法;

vue-layer有些小bug,我自己修改了一下vue-layer的一些源码:

//获取源码
//注意:链接
git clone http://yangxin@dev.redxun.cn:7990/scm/jpaas_web/vue-layer.git 

我是通过这个源码来发布rx-vue-layer版本的;
感兴趣的,想自己扩展方法的,可以自己试试;比如我扩展了onResize方法以及cancel点击遮罩也可以触发 等。

使用

//引入
import { Util } from 'jpaas-common-lib';
//使用
Util.open(config,destroy);
//config 参数 ;
{
    component:'',//弹窗打开的页面(组件);
    curVm:'',//当前页面的this(注意是调用这个方法页面的this,不是弹窗页面的this)
    widthHeight:['600px','400px'],//弹窗页面的宽,高属性
    title:'',//弹窗头部标题
    max:true,//最大化弹窗,使用这个了就不用widthHeight
    resize:true,//是否允许拉伸,默认true
    shadeClose:true,//点击遮罩是否关闭弹窗,默认为true
    shade:false,//是否显示遮罩,默认为false
    zIndex:'',//弹窗层级,数据类型为Number,数值越大层级越高越优先,用于被其它弹出层遮住的情况;
    cancel:function(id){},//点击遮罩,或者关闭按钮,触发的回调函数(返回弹窗的id)
    data:{},//传入的数据;
    onResize:function(id,data){},//监听弹窗变化的回调函数,返回弹窗id 以及 数据(data);
}
//关闭弹窗;
Util.closeWindow(this,action,data)保存并关闭窗口;
this为弹窗页面的this,  action一般确定传ok,取消不传,data为返回的数据;

//destroy 参数 ;
//destroy为回调函数,在保存关闭窗口(Util.closeWindow)的时候触发,返回action,data ;
//destroy的参数:是关闭弹窗时传入的参数;
//使用回调函数的时候要注意判断action :
function destroy(action,data){
    if(action =="ok" ){
        console.log('确认触发')
    }
}

注意

弹窗页面的props中默认需要传:layerid,lydata,destroy三个参数;

props:{
    layerid:{
        type:String
    },
    lydata:{
        type:Object
    },
    destroy:Function
}

config中的data数据 传入到弹窗打开页面的props中;

完…

文档更新时间: 2021-08-17 09:21   作者:yangxing