Dropdown 下拉菜单

下拉菜单组件，用于下拉操作菜单。

基础用法

<button id="demo-dropdown" class="sa-button sa-button--primary">下拉菜单</button>

<script>
  SA.init('body');
  const dropdown = new SaDropdown('#demo-dropdown', {
    trigger: 'click',
    menu: [
      { label: '选项一', onClick: () => alert('选项一') },
      { label: '选项二', onClick: () => alert('选项二') },
      { label: '选项三', onClick: () => alert('选项三') }
    ]
  });
</script>

加载 SanoUI 组件中...

不同触发方式

通过 trigger 配置触发方式。

<button id="demo-click">点击触发</button>
<button id="demo-hover">悬停触发</button>
<button id="demo-contextmenu">右键触发</button>

<script>
  // 点击触发
  new SaDropdown('#demo-click', {
    trigger: 'click',
    menu: [
      { label: '选项一', onClick: () => console.log('点击选项一') }
    ]
  });
  
  // 悬停触发
  new SaDropdown('#demo-hover', {
    trigger: 'hover',
    menu: [
      { label: '选项一', onClick: () => console.log('悬停选项一') }
    ]
  });
  
  // 右键触发
  new SaDropdown('#demo-contextmenu', {
    trigger: 'contextmenu',
    menu: [
      { label: '选项一', onClick: () => console.log('右键选项一') }
    ]
  });
</script>

加载 SanoUI 组件中...

带分割线

菜单项之间可以添加分割线。

<button id="demo-dropdown-divider" class="sa-button">带分割线的菜单</button>

<script>
  SA.init('body');
  const dropdown = new SaDropdown('#demo-dropdown-divider', {
    menu: [
      { label: '选项一', onClick: () => console.log('选项一') },
      { label: '选项二', onClick: () => console.log('选项二') },
      { type: 'divider' }, // 分割线
      { label: '选项三', onClick: () => console.log('选项三') }
    ]
  });
</script>

加载 SanoUI 组件中...

禁用项

某些菜单项可以设置为禁用状态。

<button id="demo-dropdown-disabled" class="sa-button">带禁用项的菜单</button>

<script>
  SA.init('body');
  const dropdown = new SaDropdown('#demo-dropdown-disabled', {
    menu: [
      { label: '可用选项', onClick: () => console.log('可用选项') },
      { label: '禁用选项', disabled: true }
    ]
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaDropdownOptions	{}

配置选项

参数	说明	类型	可选值	默认值
trigger	触发方式	string	click / hover / contextmenu	click
menu	菜单项数组	Array<DropdownMenuItem>	-	[]
placement	菜单位置	string	bottom / top / left / right	bottom

DropdownMenuItem 配置

参数	说明	类型	默认值
label	菜单项文本	string	-
icon	菜单项图标	string	-
disabled	是否禁用	boolean	false
onClick	点击回调	function()	-
type	类型（用于分割线）	string	-

方法

方法名	说明	参数	返回值
show	显示下拉菜单	-	void
hide	隐藏下拉菜单	-	void
destroy	销毁实例	-	void

示例代码

手动创建实例

const dropdown = new SaDropdown('#my-dropdown', {
  trigger: 'click',
  placement: 'bottom',
  menu: [
    { label: '编辑', icon: 'edit', onClick: () => handleEdit() },
    { label: '删除', icon: 'delete', onClick: () => handleDelete() },
    { type: 'divider' },
    { label: '更多', disabled: true }
  ]
});

// 显示菜单
dropdown.show();

// 隐藏菜单
dropdown.hide();

实际使用场景

场景 1：表格操作菜单

在表格中使用下拉菜单提供更多操作选项。

<div id="table-with-menu" style="height: 200px;"></div>

<script>
  const table = new SaTable('#table-with-menu', {
    columns: [
      { field: 'name', label: '姓名', width: 120 },
      { field: 'email', label: '邮箱', width: 200 },
      {
        field: 'action',
        label: '操作',
        width: 150,
        render: (value, row) => {
          return `
            <button class="sa-button sa-button--text" id="menu-btn-${row.id}">
              更多操作 ▼
            </button>
          `;
        }
      }
    ],
    data: [
      { id: 1, name: '张三', email: 'zhangsan@example.com' },
      { id: 2, name: '李四', email: 'lisi@example.com' }
    ]
  });
  
  // 为每个操作按钮创建下拉菜单
  setTimeout(() => {
    [1, 2].forEach(id => {
      const btn = document.getElementById(`menu-btn-${id}`);
      if (btn) {
        new SaDropdown(btn, {
          trigger: 'click',
          menu: [
            { label: '查看', onClick: () => alert(`查看用户 ${id}`) },
            { label: '编辑', onClick: () => alert(`编辑用户 ${id}`) },
            { type: 'divider' },
            { label: '删除', onClick: () => {
              if (confirm('确定要删除吗？')) {
                alert(`删除用户 ${id}`);
              }
            } }
          ]
        });
      }
    });
  }, 100);
</script>

加载 SanoUI 组件中...