更新记录

1.0.0（2025-12-11） 下载此版本

• 初始发布：封装可拖拽弹窗 boc-draggable-popup，支持定位、遮罩、动画起点与跨端拖拽。

平台兼容性

uni-app(3.6.15)

uni-app x(3.6.15)

其他

boc-draggable-popup

可拖拽的弹窗容器，支持定位显示、遮罩关闭、点击位置动画起点、H5/PC 拖拽与多端适配。

安装

将本插件放入项目 uni_modules 目录，HBuilderX/uniapp 会自动识别。

使用示例

<template>
  <view>
    <button @click="show = true">打开弹窗</button>
    <boc-draggable-popup
      v-model="show"
      :width="360"
      :mask="true"
      :mask-closable="true"
      @open="onOpen"
      @close="onClose"
    >
      <view style="padding: 24px">
        这里放你的内容
      </view>
    </boc-draggable-popup>
  </view>
</template>

<script>
export default {
  data() {
    return { show: false }
  },
  methods: {
    onOpen() {
      console.log('opened')
    },
    onClose() {
      console.log('closed')
    }
  }
}
</script>

属性

• v-model / modelValue：是否显示
• width：弹窗宽度，默认 320
• maxHeight：最大高度，'none'|'auto'|number
• mode：'center'|'position'，默认 center
• position：{ x, y } 指定位置（position 模式生效）
• mask：是否显示遮罩
• maskClosable：点击遮罩是否关闭
• origin：{ x, y } 动画起点（一般传入点击事件坐标）
• handleClass：拖拽手柄自定义类名

事件

• open：弹窗打开时触发
• close：弹窗关闭时触发
• update:modelValue：双向绑定事件

目录结构

• components/boc-draggable-popup/DraggablePopup.vue 核心组件
• index.js 统一导出
• readme.md / changelog.md / package.json 插件元数据

更多发布规范见官方文档：https://uniapp.dcloud.net.cn/plugin/publish.html#components