更新记录

1.0.0(2023-12-11) 下载此版本

初始化


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.94 app-uvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

ux-popup 弹窗组件

基础弹窗组件,可在此组件基础上实现自己的业务弹窗,技术支持QQ群:484768861

组件参数

参数名 类型 默认值 备注
pos string center 弹窗弹出方向
isMask boolean true 是否有弹窗遮罩
isMaskClick boolean true 是否点击遮罩关闭弹窗
maskBgColor string rgba(0, 0, 0, .4) 遮罩背景颜色

组件方法

方法名 返回值 参数 备注
open void 打开弹窗
close void 关闭弹窗

组件事件

事件名 参数 备注
@mask-click 点击遮罩

使用方式

以uni_modules的方式。将此组件拉下来,在需要使用的地方,可以直接使用

当前pages/index/components/home.uvue

// template
<button class="mt10" type="primary" @tap="open('center')">点击打开居中弹窗</button>
<button class="mt10" type="primary" @tap="open('left')">点击打开左侧弹窗</button>
<button class="mt10" type="primary" @tap="open('right')">点击打开右侧弹窗</button>
<button class="mt10" type="primary" @tap="open('top')">点击打开顶部弹窗</button>
<button class="mt10" type="primary" @tap="open('bottom')">点击打开底部弹窗</button>

<ux-popup ref="uxPopup" :pos="pos">
    <view :class="[`pos-${pos}`]">
        测试弹窗
        <view @tap="close">
            点击关闭
        </view>
    </view>
</ux-popup>

// script
// 获取组件实例
const popup = this.$refs['uxPopup'] as UxPopupComponentPublicInstance
// 打开弹窗
popup.open()
// 关闭弹窗
popup.close()

注意:自定义组件调用方式参考 easycom组件调用方法或设置属性

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问