说明

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

实现方式

openComponent 方法介绍

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

  1. /**
  2. * 打开自定义组件。
  3. *
  4. * @param config {
  5. * component:"组件的URL",
  6. * title:"标题",
  7. * curVm:this,
  8. * widthHeight:['800px','600px'],
  9. * data:{user:{name:"ray",address:"gz"}},
  10. * }
  11. * @param callBack 回调方法 function(action,data){
  12. *
  13. * }
  14. */
  15. DialogBox.openComponent = function (config, callBack)

config 说明

属性 说明
component 组件的地址
title 对话框标题
curVm 打开对话框的VUE实例对象
widthHeight 指定对话框的高宽,如果不指定那么会全屏打开
data 往对话框传递的数据

callBack 回调函数

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

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

实现一个具体的实例

编写一个自定义组件。

代码如下:

  1. <template>
  2. <div>
  3. {{data.user.name}},{{data.user.address}}
  4. <a-button @click="returnData()">返回数据</a-button>
  5. </div>
  6. </template>
  7. <script>
  8. import {Util} from "jpaas-common-lib"
  9. export default {
  10. name: "DemoForm",
  11. props:["data","layerid","destroy"],
  12. methods:{
  13. returnData(){
  14. var data= {name:"RAY"};
  15. Util.closeWindow(this,"ok",data);
  16. }
  17. }
  18. }
  19. </script>

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

参数 说明
data 从调用页面传递的数据
layerid 这个参数是固定的,不要更改
destroy 这个也是固定的不用更改

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

在列表中使用

1.增加一个按钮。

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

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

在自己编写的页面使用

1.编写一个页面

  1. <template>
  2. <a-button type="primary" @click="showComponent">弹窗</a-button>
  3. </template>
  4. <script>
  5. import DialogBox from "@/assets/js/DialogBox";
  6. export default{
  7. data(){
  8. return{
  9. }
  10. },
  11. methods:{
  12. showComponent: function () {
  13. var config = {
  14. component: "form/DemoForm.vue",
  15. curVm: this,
  16. title: "这是个测试",
  17. data: {user: {name: "ray", address: "广州"}}
  18. };
  19. DialogBox.openComponent(config, function (action, data) {
  20. alert(action);
  21. console.info(data);
  22. });
  23. }
  24. }
  25. }
  26. </script>

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

文档更新时间: 2021-07-09 14:26   作者:zyg