更新记录
1.0.0(2020-04-21) 下载此版本
- 支持上、下、左、右四个不同弹出方向
平台兼容性
LeePopup 弹出层
遮罩弹出层,支持从不同方向打开。
兼容情况
Android | H5 | 微信小程序 | 其他终端 |
---|---|---|---|
✔ | ✔ | ✔ | 未测试 |
使用方式
在 script
中引用组件
import LeePopup from '@/components/lee-popup/lee-popup.vue'
export default {
components: { LeePopup }
}
在 template
中使用组件
<button @click="open">打开弹窗</button>
<lee-popup ref="popup" type="bottom">底部弹出</lee-popup>
export default {
methods: {
open() {
this.$refs.popup.open()
}
}
}
属性说明
属性名 | 类型 | 可选值 | 默认值 | 说明 |
---|---|---|---|---|
type | String | top,left,right,bottom | left | 弹出方向 |
width | String | - | 440rpx | 设置横向弹出时的宽度 |
height | String | - | auto | 设置纵向弹出时的高度 |
customStyle | Object | - | - | 定义弹出层样式 |
animation | Boolean | - | true | 设置动画 |
round | Boolean | - | false | 设置圆角 |
padding | String | - | 30rpx | 设置弹出层边距 |
方法说明
通过 ref
获取组件调用方法
方法名称 | 说明 |
---|---|
open | 打开弹窗 |
close | 关闭弹窗 |
事件说明
事件名称 | 说明 | 返回值 |
---|---|---|
open | 弹窗打开事件 | - |
opened | 弹窗打开事件(动画结束) | - |
close | 弹窗关闭事件 | - |
closed | 弹窗关闭事件(动画结束) | - |
change | 弹窗状态更新事件 | status:String |