yymini-pop-center

📦 微信 / 抖音小程序通用 · 居中确认弹出框组件

yymini-pop-center 是一个 轻量、样式完全隔离、可高度定制 的居中操作弹窗组件，适用于常见的 确认 / 提示 / 操作确认 场景。

✨ 特性

• ✅ 支持 微信小程序 / 抖音小程序
• ✅ 居中弹窗 + 遮罩层
• ✅ 标题 / 内容 / 确认 / 取消
• ✅ 支持关闭按钮
• ✅ 支持遮罩点击关闭
• ✅ 支持自定义按钮 / 标题 / 内容样式
• ✅ 支持自定义遮罩背景 & 内容背景
• ✅ styleIsolation: isolated，样式隔离

📦 安装

npm install yymini-pop-center
or
yarn add yymini-pop-center

安装完成后，请在小程序开发工具中 构建 NPM。

🔧 引入组件

页面 json

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

🚀 基础使用示例

WXML TTML

<pop-center
  visible="{{showPop}}"
  title="提示"
  message="确认要删除当前内容吗？"
  bind:confirm="onConfirm"
  bind:cancel="onCancel"
  bind:close="onClose"
/>

JS

Page({
  data: {
    showPop: false
  },

  openPop() {
    this.setData({ showPop: true });
  },

  onConfirm() {
    this.setData({ showPop: false });
  },

  onCancel() {
    this.setData({ showPop: false });
  },

  onClose(e) {
    this.setData({ showPop: false });
  }
});

⚙️ 属性（Props）

| 属性名 | 类型 | 默认值 | 说明 | |------|------|--------|------| | visible | Boolean | false | 控制弹窗显示 / 隐藏 | | zindex | Number | 999 | 弹窗层级 | | title | String | 提示 | 弹窗标题 | | message | String | '' | 弹窗内容 | | width | Number | 80 | 弹窗宽度（百分比） | | cancelText | String | 取消 | 取消按钮文字 | | confirmText | String | 确认 | 确认按钮文字 | | showClose | Boolean | false | 是否显示关闭按钮 | | hideFooter | Boolean | false | 是否隐藏底部按钮 | | maskCloseable | Boolean | false | 点击遮罩是否关闭 | | bgMask | String | rgba(0,0,0,0.6) | 遮罩背景 | | bgContent | String | #FFFFFF | 内容背景 |

🎯 事件（Events）

| 事件名 | 说明 | 参数 | |------|------|------| | confirm | 点击确认 | — | | cancel | 点击取消/关闭 | — | | close | 所有关闭行为 | { type } |

close.type

• confirm 点击确认
• cancel 点击取消
• mask 点击遮罩
• close 点击关闭按钮

🎨 自定义样式（externalClasses）

externalClasses: [
  'cancel-class',
  'confirm-class',
  'title-class',
  'msg-class'
]

📄 License

MIT License © 2025