yymini-pop-slot

一款轻量级、无额外依赖、开箱即用的抖音小程序专属底部弹出框自定义组件，核心支持插槽（slot）功能，可将使用者提供的TTML内容分发到组件指定位置，实现标题、内容等区域的高度自定义，适用于需灵活定制弹窗内容的业务场景。

特性

• 抖音专属适配：专为抖音小程序设计，兼容性更优，无需额外适配处理
• 插槽核心功能：支持插槽节点分发，可自定义填充弹窗标题、内容等区域的TTML内容
• 宽高独立定制：支持分别自定义弹窗内容的宽度和高度，适配不同内容展示需求
• 灵活按钮配置：支持左右双按钮（取消+确定）自定义文案，可控制底部按钮区域显示/隐藏
• 交互逻辑清晰：支持遮罩点击关闭，弹窗主体点击防穿透，避免事件冲突
• 轻量无依赖：零外部依赖，引入即可使用，不增加项目体积负担
• 高度可配置：支持弹窗层级、返回按钮显示、遮罩关闭行为等灵活配置

安装

1. 执行 npm 安装

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

2. 抖音小程序构建 npm 打开抖音小程序开发者工具 → 工具 → 构建 npm

快速使用

1. 配置组件

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

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

2. 页面中使用（基础插槽示例）

在 ttml 中添加组件标签，使用插槽自定义标题内容，并绑定属性与事件：

<!-- 页面 ttml -->
<pop-slot
  visible="{{isVisible}}"
  title=""
  width="{{80}}"
  height="{{60}}"
  isBackLeft="{{true}}"
  btnLeft="取消"
  btnRight="确认"
  hideFooter="{{false}}"
  maskClosable="{{true}}"
  bind:close="onClose"
  bind:confirm="onConfirm"
>
  <!-- 插槽内容：slot="content" -->
  <view slot="content" style="background: #F7F7F7;">
		<view>这是里插槽 slot=content的内容</view>
		<view>11</view>
		<view>22</view>
		<view>这是里插槽 slot=content的内容</view>
		<view>111</view>
		<view>222</view>
		<view>333</view>
		<view>444</view>
		<view>这是里插槽 slot=content的内容</view>
		<view>1111</view>
		<view>2222</view>
		<view>3333</view>
		<view>4444</view>
  </view>
</pop-slot>

在 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，可根据页面元素层级调整，避免被遮挡 | | width | Number | 85 | 弹窗内容宽度，单位为百分比（%），默认占屏幕宽度的85% | | height | Number | 50 | 弹窗内容高度，单位为百分比（%），默认占屏幕高度的50% | | isBackLeft | Boolean | false | 是否显示左侧返回按钮，默认不显示 | | title | String | null | 弹窗标题（插槽形式），用于接收组件使用者提供的TTML内容分发到指定位置 | | btnLeft | String | null | 左侧取消按钮文本，为null时不显示左侧按钮（需hideFooter为false） | | btnRight | String | '确定' | 右侧确认按钮文本，默认显示“确定”（需hideFooter为false） | | hideFooter | Boolean | true | 是否隐藏底部按钮区域（左右按钮），默认隐藏 | | maskClosable | Boolean | true | 点击遮罩层是否关闭弹窗，默认关闭 | | styleClose | Object | null | 取消按钮样式 | | styleConfirm | Object | null | 确定按钮样式 |

组件事件

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

核心功能说明：插槽（slot）使用

1. 插槽核心作用

组件的TTML中包含slot节点，可将组件使用者（页面/父组件）提供的TTML内容，分发到组件内的指定位置，实现弹窗内容的高度自定义，突破固定文本内容的限制。

效果预览

效果预览地址

注意事项

1. 平台适配说明：组件专为抖音小程序设计
2. 插槽使用规范：组件内slot节点需与使用者提供的slot属性对应，若组件内未定义命名slot，所有子内容将默认分发到默认slot位置
3. 宽高单位说明：width和height属性值均为百分比，无需手动添加“%”符号，组件内部自动拼接处理
4. 按钮显示逻辑：
   • 当hideFooter为true时，无论btnLeft、btnRight是否有值，底部按钮区域均隐藏
   • 当hideFooter为false时，btnRight默认显示“确定”，btnLeft为null时仅显示右侧按钮
5. 遮罩关闭逻辑：maskClosable为true时，点击遮罩层触发close事件关闭弹窗；为false时，仅能通过按钮关闭
6. 防穿透设计：弹窗主体区域点击不会穿透到遮罩层，已通过stopPropagation方法阻止事件冒泡
7. 层级调整建议：若弹窗被其他页面元素遮挡，可增大zindex属性值