yymini-pop-content

一款轻量级、无额外依赖、开箱即用的抖音/微信小程序底部内容弹出框自定义组件，支持自定义标题、内容明细、图片、背景图等丰富内容形态，适用于信息展示、详情预览、内容确认等底部弹出场景。

特性

• 跨平台兼容：无缝适配微信小程序与抖音小程序，无需额外适配开发
• 轻量无依赖：零外部依赖，引入即可使用，不增加项目体积负担
• 丰富内容自定义：支持标题、内容标题、内容信息、图片、背景图全方位自定义
• 灵活交互控制：可配置关闭按钮显示、取消按钮显示、底部按钮区域隐藏、遮罩点击关闭
• 尺寸可控：支持自定义弹窗高度，适配不同内容展示需求
• 状态同步流畅：通过属性监听实现显示状态同步，避免异步延迟问题
• 防穿透设计：内置点击穿透阻止机制，避免内容区点击触发遮罩事件

安装

1. 执行 npm 安装

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

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

快速使用

1. 配置组件

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

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

2. 页面中使用

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

<!-- 页面 wxml -->
<pop-content
  visible="{{isVisible}}"
  title="商品详情"
  name="精选休闲外套"
  desc="纯棉材质·宽松版型·多色可选，适合春秋季穿着"
  imgSrc="/images/product.jpg"
  bgSrc="/images/bg-detail.png"
  height="{{80}}"
  showCancel="{{true}}"
  hideFooter="{{false}}"
  maskCloseable="{{false}}"
  bind:close="onClose"
  bind:confirm="onConfirm"
></pop-content>

在 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 | 弹窗及遮罩层层级，默认999，可根据页面元素层级调整，避免被遮挡 | | height | Number | 85 | 弹窗高度，单位为百分比（%），默认占屏幕高度的85% | | title | String | '' | 弹窗顶部标题，为空字符串时不显示标题区域 | | name | String | null | 内容标题（二级标题），为null时不显示该区域 | | desc | String | null | 内容信息（详情描述），为null时不显示该区域 | | imgSrc | String | null | 图片地址，为null时不显示图片区域；支持本地图片和网络图片（需配置域名） | | bgSrc | String | "bgSrc.png" | 弹窗背景图片地址，默认值为"bgSrc.png"，需确保项目中存在该图片或自定义替换 | | cancelText | String | '取消' | 取消按钮文本，可自定义文案（如“返回”“关闭”等） | | confirmText | String | '确认' | 确认按钮文本，可自定义文案（如“立即购买”“查看详情”等） | | showClose | Boolean | true | 是否显示右上角关闭按钮，默认显示 | | showCancel | Boolean | false | 是否显示取消按钮，默认不显示 | | hideFooter | Boolean | true | 是否隐藏底部按钮区域（取消+确认按钮），默认隐藏 | | maskCloseable | Boolean | false | 点击遮罩层是否关闭弹窗，默认不关闭，需手动点击按钮或关闭按钮关闭 |

组件事件

| 事件名 | 触发时机 | 事件参数 | 说明 | |----------------|--------------------------------------------|---------------------------|----------------------------------------------------------------------| | bind:close | 点击遮罩层、取消按钮或关闭按钮时触发 | { type: String } | type取值：mask（遮罩）、cancel（取消按钮）、close（关闭按钮），用于区分关闭来源 | | bind:confirm | 点击确认按钮时触发 | { from: 'confirm' } | 固定返回from为confirm，可用于精准识别确认操作，便于后续业务逻辑处理 |

效果预览

效果预览地址

注意事项

1. 无依赖特性：组件无需额外引入其他库或资源，安装后直接使用，降低项目依赖风险
2. 尺寸单位说明：height属性值为百分比，无需手动添加“%”符号，组件内部自动拼接处理
3. 背景图配置：默认背景图地址为“bgSrc.png”，若项目中无该图片，需通过bgSrc属性自定义替换，否则可能显示空白背景
4. 图片显示规则：imgSrc为null或空字符串时，图片区域自动隐藏；使用网络图片时，需在小程序后台配置对应的域名白名单
5. 状态同步机制：组件通过observer监听visible属性变化，自动同步内部show状态，无需手动控制内部状态
6. 按钮显示逻辑：当hideFooter为true时，无论showCancel是否为true，底部按钮区域均隐藏；仅当hideFooter为false时，showCancel才生效
7. 事件穿透防护：弹窗内容区点击不会穿透到遮罩层，已通过stopPropagation方法阻止事件冒泡
8. 层级调整建议：若弹窗被其他页面元素遮挡，可增大zindex属性值（建议不超过9999，避免与系统层级冲突）
9. 内容兼容性：标题、内容等文本建议控制长度，避免因文本过长导致布局错乱；可在组件外部对长文本进行换行处理后传入