MenuDrawer 是一个抽屉菜单组件，它基于 MDUI 框架开发。

使用方法：

1. 在 HTML 中引入 MenuDrawer 组件的 CSS 和 JS 文件。
2. 在 HTML 中创建一个 dialog 元素，并为其添加 class="fs-mdui-menu-drawer-dialog"。
3. 在 dialog 元素中创建一个 fs-mdui-menu-drawer 元素，并为其添加 data-title 属性，用于设置菜单标题。
4. 在 fs-mdui-menu-drawer 元素中创建一个 mdui-card 元素，并为其添加 class="fs-mdui-menu-drawer-container"。
5. 在 mdui-card 元素中创建一个 fs-mdui-menu-drawer-header 元素，用于显示菜单标题。
6. 在 mdui-card 元素中创建一个 fs-mdui-menu-drawer-body 元素，用于显示菜单内容。
7. 在 fs-mdui-menu-drawer-body 元素中添加菜单内容。
8. 在需要打开菜单的地方，使用 JavaScript 调用 menudrawer.open() 方法，传入 dialog 元素的引用。

示例代码：

<dialog class="fs-mdui-menu-drawer-dialog">
    <fs-mdui-menu-drawer data-title="MenuDrawer">
        <mdui-card class="fs-mdui-menu-drawer-container">
            <fs-mdui-menu-drawer-header></fs-mdui-menu-drawer-header>
            <fs-mdui-menu-drawer-body>
                <p>这是菜单内容</p>
            </fs-mdui-menu-drawer-body>
        </mdui-card>
    </fs-mdui-menu-drawer>
</dialog>

<script>
    const dialog = document.querySelector('.fs-mdui-menu-drawer-dialog');
    menudrawer.open(dialog);
</script>

注意事项：

1. 需要前置 mdui 组件库文件，如 mdui.css 和 mdui.global.js，以及图标文件。
2. 你可以添加可选的菜单图标，在 fs-mdui-menu-drawer 元素上添加 data-icon 属性，值为 Material Icons 图标名称即可。
3. 通过 menudrawer.close() 方法传入 dialog 元素的引用来关闭特定的抽屉菜单。

提示：你可以通过 dialog.onclose 等事件监听抽屉菜单的打开与关闭。