Dropdown 下拉菜单

基础用法

移动到下拉菜单上，展开更多操作。

Dropdown 下拉菜单 - 图1

  1. {
  2.   "type": "dropdown",
  3.   "options": {
  4.     "menu": "下拉菜单一",
  5.     "menuItems": ["黄金糕", "狮子头", "螺蛳粉", "双皮奶", "蚵仔煎"]
  6.   },
  7.   "style": {
  8.     "margin-bottom": "50px"
  9.   }
  10. }

显示配置

触发对象

可使用按钮触发下拉菜单。

Dropdown 下拉菜单 - 图2

  1. {
  2.   "type": "dropdown",
  3.   "options": {
  4.     "menu": "下拉菜单二",
  5.     "menuItems": ["黄金糕", "狮子头", "螺蛳粉", {
  6.       "text": "双皮奶",
  7.       "props": {
  8.         "disabled": true
  9.       }
  10.     }, {
  11.       "text": "蚵仔煎",
  12.       "props": {
  13.         "divided": true
  14.       }
  15.     }]
  16.   },
  17.   "props": {
  18.     "type": "primary",
  19.     "split-button": true
  20.   },
  21.   "style": {
  22.     "margin-bottom": "50px"
  23.   }
  24. }

显示配置

指令事件

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作

Dropdown 下拉菜单 - 图3

  1. {
  2.   "type": "dropdown",
  3.   "options": {
  4.     "menu": "点击触发下拉",
  5.     "menuItems": [{
  6.       "text": "黄金糕",
  7.       "props": {
  8.         "command": "a",
  9.         "icon": "el-icon-plus"
  10.       }
  11.     }, {
  12.       "text": "狮子头",
  13.       "props": {
  14.         "command": "b",
  15.         "icon": "el-icon-circle-plus"
  16.       }
  17.     }, {
  18.       "text": "螺蛳粉",
  19.       "props": {
  20.         "command": "c",
  21.         "icon": "el-icon-circle-plus-outline"
  22.       }
  23.     }, {
  24.       "text": "双皮奶",
  25.       "props": {
  26.         "command": "d",
  27.         "icon": "el-icon-check"
  28.       }
  29.     }, {
  30.       "text": "蚵仔煎",
  31.       "props": {
  32.         "command": "e",
  33.         "icon": "el-icon-circle-check-outline"
  34.       }
  35.     }]
  36.   },
  37.   "props": {
  38.     "trigger": "click"
  39.   },
  40.   "on": {
  41.     "command": function(o) {
  42.       this.$message("click on item " + o)
  43.     }
  44.   },
  45.   "style": {
  46.     "margin-bottom": "50px"
  47.   }
  48. }

显示配置

菜单隐藏方式

可以hide-on-click属性来配置。

Dropdown 下拉菜单 - 图4

  1. {
  2.   "type": "dropdown",
  3.   "options": {
  4.     "menu": "下拉菜单",
  5.     "menuItems": [{
  6.       "text": "黄金糕",
  7.       "props": {
  8.         "command": "a",
  9.         "icon": "el-icon-plus"
  10.       }
  11.     }, {
  12.       "text": "狮子头",
  13.       "props": {
  14.         "command": "b",
  15.         "icon": "el-icon-circle-plus"
  16.       }
  17.     }, {
  18.       "text": "螺蛳粉",
  19.       "props": {
  20.         "command": "c",
  21.         "icon": "el-icon-circle-plus-outline"
  22.       }
  23.     }, {
  24.       "text": "双皮奶",
  25.       "props": {
  26.         "command": "d",
  27.         "icon": "el-icon-check",
  28.         "disabled": true
  29.       }
  30.     }, {
  31.       "text": "蚵仔煎",
  32.       "props": {
  33.         "command": "e",
  34.         "icon": "el-icon-circle-check-outline"
  35.       }
  36.     }]
  37.   },
  38.   "props": {
  39.     "hide-on-click": false
  40.   },
  41.   "style": {
  42.     "margin-bottom": "50px"
  43.   }
  44. }

显示配置

在线实验室

Dropdown 下拉菜单 - 图5

Dropdown 下拉菜单 - 图6

参数列表

参数说明可选值 | 类型必填
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否