更新记录
1(2024-11-21)
下载此版本
发布
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
参数说明
props |
类型 |
是否必填 |
默认值 |
说明 |
maskClickClose |
Boolean |
否 |
true |
点击遮罩是否关闭弹窗 |
round |
String,Number |
否 |
0 |
弹窗圆角 支持传入px,rpx,也可以纯数字(px) |
mode |
String |
否 |
center |
弹出层方向 bottom(下) top(上) center(中) |
backgroundColor |
String |
否 |
#fff |
弹出层背景色 |
mask |
Boolean |
否 |
true |
是否显示遮罩层 |
打开方法 open() 关闭方法 close() @maskClose
通过 @success="" 调用方法 该方法会返回一个临时路径 详情看 uni.canvasToTempFilePath 方法
示例代码如下:
<template>
<view>
<xcyd-popup ref="popup" mode="bottom" round='10' @maskClose='maskClose'>
<view style="padding: 50px; background-color: #fff;"></view>
</xcyd-popup>
<button @click="open()">打开</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
open() {
this.$refs.popup.open()
},
close(){
this.$refs.popup.close()
}
maskClose() {
console.log('点击遮罩关闭弹窗事件')
}
}
}
</script>
<style>
</style>