Dialog 弹窗

基础用法

Dialog 弹窗 - 图1

  1. {
  2.   "type": "component",
  3.   "operations": {
  4.     "addItem": {
  5.       "type": "button",
  6.       "label": "点击打开弹窗"
  7.     }
  8.   },
  9.   "events": {
  10.     "addItem": "@adminAddDialog.show"
  11.   },
  12.   "blocks": {
  13.     "adminAddDialog": {
  14.       "type": "dialog",
  15.       "data": {
  16.         "title": "添加"
  17.       },
  18.       "props": {
  19.         "append-to-body": true
  20.       },
  21.       "operations": {
  22.         "submit": {
  23.           "type": "button",
  24.           "label": "提交",
  25.           "props": {
  26.             "type": "primary"
  27.           }
  28.         },
  29.         "hide": {
  30.           "type": "button",
  31.           "label": "关闭"
  32.         }
  33.       },
  34.       "actions": {
  35.         "submit": function() {
  36.           this.$message("你点击了提交按钮")
  37.         }
  38.       },
  39.       "blocks": {
  40.         "dialogText": {
  41.           "type": "component",
  42.           "options": {
  43.             "is": "div",
  44.             "text": "我是弹窗内容"
  45.           }
  46.         }
  47.       }
  48.     }
  49.   }
  50. }

显示配置

自定义内容

Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是嵌套的表单

Dialog 弹窗 - 图2

  1. {
  2.   "type": "component",
  3.   "operations": {
  4.     "addItem": {
  5.       "type": "button",
  6.       "label": "点击打开弹窗"
  7.     }
  8.   },
  9.   "events": {
  10.     "addItem": "@adminAddDialog.show"
  11.   },
  12.   "blocks": {
  13.     "adminAddDialog": {
  14.       "type": "dialog",
  15.       "data": {
  16.         "title": "添加"
  17.       },
  18.       "props": {
  19.         "append-to-body": true
  20.       },
  21.       "operations": {
  22.         "submit": {
  23.           "type": "button",
  24.           "label": "提交",
  25.           "props": {
  26.             "type": "primary"
  27.           }
  28.         },
  29.         "hide": {
  30.           "type": "button",
  31.           "label": "关闭"
  32.         }
  33.       },
  34.       "events": {
  35.         "submit": "addDialogForm.submit"
  36.       },
  37.       "blocks": {
  38.         "addDialogForm": {
  39.           "type": "form",
  40.           "resource": {
  41.             "fields": {
  42.               "text": {
  43.                 "label": "新文本",
  44.                 "type": "text"
  45.               },
  46.               "date": {
  47.                 "type": "date",
  48.                 "label": "日期"
  49.               },
  50.               "password": {
  51.                 "type": "password",
  52.                 "label": "密码"
  53.               }
  54.             }
  55.           },
  56.           "ctx": "edit",
  57.           "events": {
  58.             "submit": "@validate @add @adminAddDialog.hide @clear"
  59.           },
  60.           "actions": {
  61.             "add": function() {
  62.               this.callAction("@adminListView.add", {
  63.                 item: this.data
  64.               })
  65.             },
  66.             "clear": function() {
  67.               this.data = {}
  68.             }
  69.           }
  70.         }
  71.       }
  72.     }
  73.   }
  74. }

显示配置

在线实验室

Dialog 弹窗 - 图3

Dialog 弹窗 - 图4

参数列表

参数说明可选值 | 类型必填
typeblock类型string是
datadata可以指定当前block的初始数据，结构和fields保持一致null | object否
config全局配置，和通过ams.config配置效果一致null | object否
style可以设置区块的外层样式null | object否
events可以配置对应事件的处理actionsnull | object否
actions可以配置具体的action处理函数null | object否
operations可以配置operation操作null | object否
blocks可以配置多个子blocknull | object否
render默认为false，配置为true则自动在body内渲染，如传入string则渲染在指定的querySelector上boolean | string否
props会透传至底层的element-ui组件作为props属性，或者是原生dom元素的属性null | object否
optionsblock特有配置null | object否