按钮菜单

按钮菜单控件用于弹出上下文菜单，支持独立控件使用、绑定到其他控件（右键触发）两种方式，两者可同时使用。

使用方式

1. 菜单独立控件：菜单控件在页面默认渲染成类似按钮的样式，点击后弹出菜单
2. 绑定到其他控件：将菜单控件隐藏（display:none），在被绑定的控件上配置 sg-menu，右键点击即可弹出菜单
3. 同时使用：独立控件和被绑定控件可同时使用
4. 智能弹出方向：菜单弹出前自动判断位置，控件在下方则向上弹出，控件在右边则向左弹出（参考 Windows 弹出菜单）
5. 层级控制：菜单的 z-index 不会遮挡并影响到 openAlert、loading 等高优先级弹窗

属性

sg-label

• 说明：菜单按钮文字（作为独立控件时使用）
• 类型：string

示例:

"sg-label":"菜单"

class

• 说明：菜单按钮样式（作为独立控件时使用，参考按钮控件的预置颜色样式）
• 类型：string

示例:

"class":"green"

sg-icon

• 说明：菜单按钮图标，填入字体图标编码（作为独立控件时使用）
• 类型：string

示例:

"sg-icon":"icon-zhucaidan1"

sg-list

• 说明：菜单列表，数组格式
• 类型：Array

菜单项参数说明:

参数名	类型	必填	说明
key	string	是	菜单项的 key（每个菜单项不能重复），选择菜单后调用方法可以带过去
text	string	是	菜单文字
icon	string	否	菜单图标
disabled	boolean	否	true 菜单项被禁用（变灰色，点击无效）
sg-auth	string	number	否
children	Array	否	子菜单列表
hide	boolean	否	true 隐藏菜单项（配合 sg-opening 方法动态控制）

示例:

"sg-list":[
  {
    "disabled": true,
    "key": "add",
    "text": "添加",
    "icon": "icon-bianji1",
    "sg-auth": "1"
  },
  {
    "key": "save",
    "text": "保存",
    "icon": "icon-bianji1",
    "sg-auth": "2"
  },
  {
    "key": "more",
    "text": "更多",
    "icon": "icon-icon-cart",
    "sg-auth": "3",
    "children": [
      {
        "key": "menu_a",
        "text": "子菜单项A",
        "icon": "icon-a-Frame9",
        "sg-auth": 3
      },
      {
        "key": "menu_b",
        "text": "子菜单项B",
        "icon": "icon-baocun6",
        "sg-auth": 3
      }
    ]
  }
]

sg-opening

• 说明：菜单前置事件，返回 true 弹出菜单，false 或 null 不弹出菜单。也可返回处理后的 list 动态控制菜单项
• 类型：string
• 默认行为：默认返回 true（即弹出菜单）

示例:

"sg-opening":"opening"

方法说明:

function opening(menu_id, ctrl_id, list) {
  // menu_id：菜单控件 ID
  // ctrl_id：被点击控件 ID
  // list：菜单 sg-list 的原始报文

  var disable_menu = true; // 如果整个菜单不显示
  if (disable_menu) {
    return null; // 返回 null 或 false 不弹出菜单
    // 返回 true 则整个菜单显示
  }

  // 如果需要对部分菜单项进行处理，可以返回处理后的 list
  for (var i = list.length - 1; i > -1; i--) {
    var item = list[i];
    if (item.key == "save") {
      // 不需要的菜单，则移除掉
      list.splice(i, 1);
    }
    if (item.key == "add") {
      // 禁用菜单，属性 disabled 设置 true
      list[i].disabled = true;
    }
    if (item.key == "more") {
      // 隐藏菜单，属性 hide 设置 true
      list[i].hide = true;
    }
  }

  return list; // 最后返回 list，框架会根据返回的 list 进行渲染
}

sg-itemSelected

• 说明：菜单点击调用方法，获取被点击菜单选项的 key、菜单控件 id、被绑定的控件 id
• 类型：string

示例:

"sg-itemSelected":"itemSelected"

方法说明:

function itemSelected(menu_id, ctrl_id, key) {
  // menu_id：菜单控件 ID
  // ctrl_id：被点击控件 ID
  // key：菜单项的 key
}

sg-menu

• 说明：绑定菜单控件 ID。在被绑定的控件上配置此属性，右键点击即可弹出菜单。注意：挂菜单的控件必须填上控件 ID 才能正常出现菜单
• 类型：string

示例:

"sg-menu":"menu_hide"

方法

openMenu

手动打开菜单（左键触发）。

语法:

openMenu(menu_id, event)

参数:

参数名	类型	必填	说明
menu_id	string	是	菜单控件 ID
event	Object	是	事件 event 对象

示例:

// 左键点击弹出菜单
"onclick":"openMenu('menu_hide', event)"

绑定到其他控件

1. 在菜单控件的容器样式加上 display:none;，将菜单控件隐藏
2. 在被绑定的控件添加属性 sg-menu，传入菜单控件 ID

备注:

• 图片控件也可以挂菜单
• 挂菜单的控件必须填上控件 ID 才能正常出现菜单