更新记录
1.0.0(2023-05-14)
下载此版本
1.0.0
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
l-popup
使用方法
配置easycom规则后,自动按需引入,无需import
组件,直接引用即可。
<template>
<l-popup :radius="20" :show="popupShow" @mask="mask">
<view class="" v-for="ite in 10" style="width: 300px;text-align: center;">
slot自定义内容
</view>
</l-popup>
<view class="" @click="open" style="padding: 20rpx;background-color: greenyellow;color: aliceblue;border-radius: 20rpx;text-align: center;margin:20rpx">
打开弹层
</view>
</view>
</template>
组件属性
属性 |
类型 |
默认值 |
说明 |
mask |
Boolean |
true |
是否需要mask |
show |
Boolean |
false |
控制显示 |
backgroundColor |
String |
'#fff' |
背景颜色 |
height |
Number |
0 |
高度 只有上下弹出设置才有效 |
radius |
Number |
0 |
设置圆角 自动根据弹出方式设置圆角 上:左下右下 下:左上右上 中间:四个角 左:右上右下 右:左上左下 |
zIndex |
Number, String |
997 |
内容zindex |
maskZIndex |
Number, String |
996 |
遮罩zindex |
type |
String |
'center' |
弹层从哪弹出 bottom下 top上 left左 right右 center中间 |
组件事件
名称 |
触发时机 |
mask |
点击遮罩 可用来点击遮罩关闭弹层 |
插槽