说明

平台提供了自定义列表功能，我们可以基于这个列表做一些二次开发，比如我们自定义一些组件，在列表中打开，列表的js代码不支持直接 import 代码，因此我们希望能够直接指定组件的地址进行打开，传值，返回。下面就介绍一下如何在列表代码中实现上面提到的需求。

实现方式

openComponent 方法介绍

在平台中的DialogBox 的代码中提供了方法openComponent 来实现这个需求。

/**
 * 打开自定义组件。
 *
 * @param config {
 *   component:"组件的URL",
 *   title:"标题",
 *   curVm:this,
 *   widthHeight:['800px','600px'],
 *   data:{user:{name:"ray",address:"gz"}},
 * }
 * @param callBack 回调方法 function(action,data){
 *
 * }
 */
DialogBox.openComponent = function (config, callBack)

config 说明

callBack 回调函数

当对话框执行关闭函数时，执行的回调方法。

参数说明:
action: 返回的动作
data：对话框返回的数据

实现一个具体的实例

编写一个自定义组件。

代码如下：

<template>
    <div>
      {{data.user.name}},{{data.user.address}}
      <a-button @click="returnData()">返回数据</a-button>
    </div>
</template>
<script>
    import {Util} from "jpaas-common-lib"
    export default {
        name: "DemoForm",
        props:["data","layerid","destroy"],
        methods:{
            returnData(){
                var data= {name:"RAY"};
                Util.closeWindow(this,"ok",data);
            }
        }
    }
</script>

这个组件有几个属性是固定的：

点击按钮时
可以使用上面代码提供的方法返回数据。

在列表中使用

1.增加一个按钮。

2.在页面JS函数定义 中编写代码

showComponent(){
    var config={component:"form/DemoForm.vue",curVm:this,title:"这是个测试",data:{user:{name:"ray",address:"广州"}}};
    this.getDialogBox().openComponent(config,function(action,data){
        alert(action);
        console.info(data);
    });

在自己编写的页面使用

1.编写一个页面

<template>
  <a-button type="primary" @click="showComponent">弹窗</a-button>
</template>
<script>
  import DialogBox from "@/assets/js/DialogBox";
  export default{
    data(){
      return{
      }
    },
    methods:{
      showComponent: function () {
        var config = {
          component: "form/DemoForm.vue",
          curVm: this,
          title: "这是个测试",
          data: {user: {name: "ray", address: "广州"}}
        };
        DialogBox.openComponent(config, function (action, data) {
          alert(action);
          console.info(data);
        });
      }
    }
  }
</script>

运用上面一样的代码，只需 import dialogbox 即可实现，效果如下