Collapse 折叠面板

基础用法

通过 data.active 来指定默认展开哪个面部。

Collapse 折叠面板 - 图1

  1. {
  2.   "type": "collapse",
  3.   "options": {
  4.     "defaultCollapseBlock1": "一致性 <i class=\"header-icon el-icon-info\"></i>",
  5.     "defaultCollapseBlock2": "反馈"
  6.   },
  7.   "data": {
  8.     "active": "defaultCollapseBlock1"
  9.   },
  10.   "blocks": {
  11.     "defaultCollapseBlock1": {
  12.       "type": "component",
  13.       "options": {
  14.         "is": "p",
  15.         "text": "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"
  16.       }
  17.     },
  18.     "defaultCollapseBlock2": {
  19.       "blocks": {
  20.         "block21": {
  21.           "type": "component",
  22.           "options": {
  23.             "is": "img"
  24.           },
  25.           "style": {
  26.             "width": "100px",
  27.             "height": "100px",
  28.             "backgroundColor": "#007"
  29.           },
  30.           "props": {
  31.             "src": "//b.appsimg.com/upload/vivaadmin/2018/11/07/69/1541579376290922128.png"
  32.           }
  33.         },
  34.         "block22": {
  35.           "type": "component",
  36.           "options": {
  37.             "is": "h1",
  38.             "text": "我是文字"
  39.           }
  40.         }
  41.       }
  42.     }
  43.   }
  44. }

显示配置

手风琴效果

通过 props.accordion 属性来设置是否以手风琴模式显示。

Collapse 折叠面板 - 图2

  1. {
  2.   "type": "collapse",
  3.   "options": {
  4.     "defaultCollapseBlock1": "一致性 <i class=\"header-icon el-icon-info\"></i>",
  5.     "defaultCollapseBlock2": "效率",
  6.     "defaultCollapseBlock3": "反馈"
  7.   },
  8.   "data": {
  9.     "active": "defaultCollapseBlock1"
  10.   },
  11.   "props": {
  12.     "accordion": true
  13.   },
  14.   "blocks": {
  15.     "defaultCollapseBlock1": {
  16.       "type": "component",
  17.       "options": {
  18.         "is": "p",
  19.         "text": "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"
  20.       }
  21.     },
  22.     "defaultCollapseBlock2": {
  23.       "blocks": {
  24.         "block21": {
  25.           "type": "component",
  26.           "options": {
  27.             "is": "img"
  28.           },
  29.           "style": {
  30.             "width": "100px",
  31.             "height": "100px",
  32.             "backgroundColor": "#007"
  33.           },
  34.           "props": {
  35.             "src": "//b.appsimg.com/upload/vivaadmin/2018/11/07/69/1541579376290922128.png"
  36.           }
  37.         },
  38.         "block22": {
  39.           "type": "component",
  40.           "options": {
  41.             "is": "h1",
  42.             "text": "我是文字"
  43.           }
  44.         }
  45.       }
  46.     },
  47.     "defaultCollapseBlock3": {
  48.       "type": "component",
  49.       "options": {
  50.         "is": "div",
  51.         "html": "<p>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：</p><p>所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</p>"
  52.       }
  53.     }
  54.   }
  55. }

显示配置

在线实验室

Collapse 折叠面板 - 图3

Collapse 折叠面板 - 图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否