更新记录

1.0.0（2026-10-08） 下载此版本

• 首个版本，实现组件基础能力，支持 Vue2 / Vue3、全平台（App / H5 / 各家小程序）。

平台兼容性

uni-app(4.05)

e-drawer 抽屉

抽屉式导航组件，支持左右方向、自定义宽度、遮罩点击关闭，适合侧边菜单、筛选面板、设置面板等场景。

特性

• 左右两个方向弹出
• 宽度可自定义
• 内容区独立滚动，自带 iOS 惯性滚动优化
• 遮罩点击关闭，防止滚动穿透

基本用法

<template>
  <view>
    <button @click="show = true">打开菜单</button>

    <e-drawer v-model="show" mode="left" width="260px">
      <view class="menu">
        <view
          v-for="item in menus"
          :key="item.name"
          class="menu-item"
          @click="go(item)"
        >
          <text>{{ item.name }}</text>
        </view>
      </view>
    </e-drawer>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      menus: [
        { name: '首页', path: '/pages/index/index' },
        { name: '路况监测', path: '/pages/road/index' },
        { name: '事件管理', path: '/pages/event/index' },
        { name: '系统设置', path: '/pages/setting/index' }
      ]
    }
  },
  methods: {
    go(item) {
      this.show = false
      uni.navigateTo({ url: item.path })
    }
  }
}
</script>

属性

事件

使用提示

宽度不要用百分比

抽屉宽度建议用固定值（px）而非百分比。百分比在横竖屏切换、平板适配时会导致菜单宽度异常，固定宽度在移动端是更稳的选择。常用的宽度：

• 窄菜单（只有图标）：80px
• 标准菜单（图标 + 文字）：220px ~ 260px
• 筛选面板：300px ~ 340px

点击菜单项后记得关闭抽屉

抽屉打开时遮罩会拦截下层页面点击，所以菜单项点击后应先 v-model 置 false 再跳转，否则用户返回时会看到抽屉仍处于打开状态。

内容区滚动

e-drawer 的内容区自带 overflow-y: auto，超出高度的内容可以滚动。如果菜单项很多需要更好的性能，可以在里面嵌套 scroll-view。

与 e-popup 的区别

e-popup 的 left / right 模式也能实现侧边弹出，两者的定位不同：

做侧边菜单用 e-drawer，其默认行为更贴合需求，代码更少。

平台兼容

App (vue / nvue)、H5、全平台小程序均支持。

隐私与权限

纯前端渲染组件，不申请任何权限，不采集、不上传任何数据。