更新记录

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

效果预览

效果预览

隐私、权限声明

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

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

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

许可协议

MIT协议

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