更新记录

1.0.1（2025-08-15）

更新说明

1.0.0（2025-08-14）

firstcommit

平台兼容性

uni-app x(4.65)

xudy-popup 弹出层组件

介绍

xudy-popup 是一个功能丰富的弹出层组件，支持从四个方向（上、右、下、左）弹出，具有平滑的动画效果和可自定义的内容区域。该组件适用于各种场景，如模态对话框、操作菜单、信息提示等。

属性

属性名 类型 默认值 说明 title String '' 弹出层标题 direction String 'bottom' 弹出方向，可选值：'top'、'right'、'bottom'、'left' directionValue String '80%' 弹出距离，使用百分比格式，如 '80%' opened Boolean false 初始打开状态 isShowCloseBtn Boolean false 是否显示关闭按钮

事件

事件名 说明 返回值 load 组件加载完成时触发 { open: Function, close: Function, isOpen: Boolean }

方法

通过 load 事件可以获取到以下方法：

方法名 说明 参数 open 打开弹出层 无 close 关闭弹出层 无

使用示例

<template>
  <view>
    <button @click="openPopup">打开底部弹出层</button>
    <xudy-popup 
      ref="popupRef" 
      title="标题" 
      direction="bottom" 
      directionValue="80%" 
      :isShowCloseBtn="true"
      @load="onPopupLoad">
      <view style="padding: 20rpx;">
        <text>这是弹出层的内容</text>
      </view>
    </xudy-popup>
  </view>
</template>

<script setup>
let openPopup : () => void = () => { };
let closePopup : () => void = () => { };
const onPopupLoad = (param : UTSJSONObject) => {
    console.log(param)
    openPopup = param.open as () => void;
    closePopup = param.close as () => void;
    console.log(param.isOpen)
}

</script>

功能特性

• 支持四个方向弹出（上、右、下、左）
• 可自定义弹出距离
• 平滑的动画效果
• 可选的标题和关闭按钮
• 支持自定义内容区域
• 响应式设计，适配不同屏幕尺寸
• 遮罩层背景，点击可关闭弹出层
• 支持初始打开状态设置