更新记录

1.0.0（2026-01-13） 下载此版本

悬浮抽屉

平台兼容性

float-drawer 悬浮抽屉组件

组件简介

float-drawer 是基于 uni-app 开发的可拖拽悬浮抽屉组件，支持多端适配（H5/微信小程序/APP等）。组件核心功能为上下拖拽展开/收起抽屉面板，配套遮罩层联动显示，提供灵活的插槽自定义内容，适用于地图、表单、信息展示等需要悬浮交互面板的业务场景。

特性

• 🚀 支持上下拖拽手柄控制抽屉展开/收起
• 🌑 拖拽过程中遮罩层透明度动态联动
• 🎨 自定义拖拽手柄高度
• 🧩 插槽化设计，灵活自定义标题和内容
• 📱 原生触摸事件适配，移动端交互流畅

快速开始

1. 组件引入

将 float-drawer.vue 放入项目组件目录（如 @/components/），在目标页面引入并注册：

<script>
// 引入组件
import floatDrawer from '@/components/float-drawer.vue'

export default {
  // 注册组件
  components: {
    floatDrawer
  },
  data() {
    return {
      // 页面业务数据
    }
  }
}
</script>