yymini-pop-bottom

一款轻量、可定制的抖音/微信小程序底部弹出确认弹窗组件，支持自定义标题、按钮文案、遮罩行为等功能，适用于各类需要用户二次确认的业务场景。

特性

• 跨平台兼容：同时支持微信小程序和抖音小程序
• 高度可定制：支持自定义标题、内容、按钮文本、弹窗层级
• 灵活的交互控制：支持遮罩点击关闭、关闭按钮显示隐藏、底部按钮区域隐藏
• 事件透传：确认/关闭事件携带业务参数，方便父组件处理逻辑
• 无异步延迟：内部维护显示状态，避免属性同步延迟问题

安装

1. 执行 npm 安装

npm install yymini-pop-bottom --save
or
yarn add yymini-pop-bottom

2. 小程序构建 npm
   • 微信小程序：打开开发者工具 → 工具 → 构建 npm → 勾选 "使用 npm 模块"
   • 抖音小程序：打开开发者工具 → 工具 → 构建 npm

快速使用

1. 配置组件

在需要使用弹窗的页面或组件的 json 文件中声明组件引用：

{
  "usingComponents": {
    "pop-bottom": "/miniprogram_npm/yymini-pop-bottom/pop-bottom"
  }
}

2. 页面中使用

在 ttml、wxml 中添加组件标签，并绑定属性和事件：

<pop-bottom
  visible="{{isVisible}}"
  title="温馨提示"
  message="确认执行当前操作吗？"
  cancel-text="再想想"
  confirm-text="确认执行"
  mask-closeable="{{false}}"
  bind:close="onClose"
  bind:confirm="onConfirm"
>
</pop-bottom>

在 js 中控制弹窗显示和处理事件：

Page({
  data: {
    isVisible: false
  },
  // 打开弹窗
  openPopup() {
    this.setData({ isVisible: true });
  },
  // 弹窗关闭事件（点击遮罩/关闭按钮/取消按钮触发）
  onClose(e) {
    console.log("弹窗关闭，触发类型：", e.detail?.type);
    this.setData({ isVisible: false });
  },
  // 弹窗确认事件
  onConfirm(e) {
    console.log("确认按钮点击，携带参数：", e.detail);
    // 执行业务逻辑
    this.setData({ isVisible: false });
  }
})

组件属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | visible | Boolean | false | 必填，控制弹窗显示/隐藏 | | zindex | Number | 999 | 弹窗层级，用于避免被其他元素遮挡 | | title | String | '' | 弹窗标题 | | message | String | '' | 弹窗提示内容 | | cancelText | String | 取消 | 取消按钮文本 | | confirmText | String | 确认 | 确认按钮文本 | | showClose | Boolean | true | 是否显示右上角关闭按钮 | | showCancel | Boolean | true | 是否显示取消按钮 | | hideFooter | Boolean | false | 是否隐藏底部按钮区域（取消+确认） | | maskCloseable | Boolean | false | 点击遮罩层是否关闭弹窗 |

组件事件

| 事件名 | 触发时机 | 事件参数 | 说明 | |--------|----------|----------|------| | bind:close | 点击遮罩层/关闭按钮/取消按钮时 | { type?: 'mask' } | 关闭弹窗事件，点击遮罩时会携带 type: 'mask' 参数 | | bind:confirm | 点击确认按钮时 | { message: 弹窗内容, ...其他参数 } | 确认事件，携带弹窗内容及按钮事件透传参数 |

效果预览

效果预览地址

注意事项

1. npm 构建：使用前必须完成小程序的 npm 构建，否则会提示组件找不到
2. 层级问题：如果弹窗被其他元素遮挡，可通过调整 zindex 属性提高层级
3. 状态同步：组件内部通过 observer 监听 visible 属性，无需手动控制内部 show 状态
4. 事件穿透：弹窗主体区域点击不会穿透到遮罩，已内置 stopPropagation 方法