Component 动态区块

动态block主要用于配置原生节点或者非block节点，如 <a/> <img/> <div/> 等元素，如 <el-tooltip> 等全局vue组件，方便进行一些布局调整或者是简单的功能；或者是集成自定义组件（要先通过 Vue.component('test', myComponent) 注册成全局组件 ）

基础用法

一个 img 标签

{
  "type": "component",
  "options": {
    "is": "img"
  },
  "style": {
    "width": "200px",
    "height": "200px"
  },
  "props": {
    "src": "//b.appsimg.com/upload/vivaadmin/2018/11/07/69/1541579376290922128.png"
  }
}

显示配置

插入TEXT和HTML

注意：插入的 HTML 会在 TEXT 前面。

{
  "type": "component",
  "options": {
    "is": "div",
    "text": "我是插进来的TEXT内容",
    "html": "<h3>我是插进来的HTML内容</h3>"
  }
}

显示配置

HTML标签和elementUI组件标签组合

一个包含星星评分 el-rate 和操作按钮的 div。

{
  "type": "component",
  "options": {
    "is": "div"
  },
  "style": {
    "padding": "100px"
  },
  "operations": {
    "test": {
      "type": "button",
      "label": "提交"
    }
  },
  "actions": {
    "test": function() {
      this.$message("你点击了提交按钮")
    }
  },
  "blocks": {
    "testBlockComponent": {
      "type": "component",
      "options": {
        "is": "el-rate"
      },
      "props": {
        "value": 4
      }
    }
  }
}

显示配置

在线实验室

参数列表