更新记录

1.0.1（2026-01-06） 下载此版本

新增关闭按钮

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

组件初始化

平台兼容性

uni-app(4.87)

uni-app x(3.7.0)

ResizableModal 组件使用文档

概述

resizable-modal 是一个可调整高度的模态框组件，支持触摸拖拽调整高度，适用于移动端场景。

功能特性

• 可调整高度：通过拖拽顶部手柄调整模态框高度
• 触摸支持：支持触摸事件，适用于移动端
• 高度限制：可设置最小/最大高度限制
• 响应式设计：支持大屏设备居中显示

Props 参数

插槽

• header：头部插槽，用于放置标题或其他头部内容
• 默认插槽：内容插槽，用于放置模态框主体内容

使用示例

<template>
  <view>
    <button @click="showModal = true">打开模态框</button>

    <resizable-modal 
      v-model:value="showModal"
      :min-height="200"
      :max-height="600"
      :default-height="400"
    >
      <template #header>
        <text>标题</text>
      </template>
      <view>
        <text>这里是模态框内容</text>
      </view>
    </resizable-modal>
  </view>
</template>

<script>
import ResizableModal from '@/uni_modules/resizable-modal/components/resizable-modal/resizable-modal.vue';

export default {
  components: {
    ResizableModal
  },
  data() {
    return {
      showModal: false
    };
  }
};
</script>

样式说明

• 定位：使用 position: fixed 固定在页面底部
• 圆角：顶部左右角有 24rpx 圆角
• 阴影：有轻微的上部阴影效果
• 过渡动画：高度变化有 0.05s 的平滑过渡
• 大屏适配：在屏幕宽度 ≥ 768px 时会居中显示

拖拽手柄

• 位于模态框顶部，高度 60rpx
• 有蓝色指示条（#3586FF）提示可拖拽
• 鼠标悬停时显示 row-resize 光标样式

注意事项

• 高度调整范围限制在 [minHeight, maxHeight] 之间
• 内容区域使用 scroll-view 组件，支持内容滚动
• 模态框使用 v-show 控制显示隐藏，不会销毁组件实例