更新记录

1.0.4(2021-08-02)

修复中间弹窗,弹窗会跟着屏幕滚动而滚动!

1.0.3(2021-07-27)

1、修复了穿透问题; 2、增加可自定义高度; 3、增加弹窗监听事件; 4、增加有遮罩情况下,可控制点击遮罩是否关闭弹窗;

查看更多

平台兼容性

Vue2 Vue3
×
App 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
2.9.8
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

使用方法


1、引入插件

import pop from "@/components/ming-pop/ming-pop.vue";

2.挂载插件

components: {pop}

3、在需要的页面中导入ming-pop弹窗组件,并在页面中使用该组件:

<pop  
    ref="pop" 
    direction="below" 
    :is_close="true" 
    :is_mask="true" 
    :width="100"  
    height="fit-content" 
    :maskFun="true" 
    @watchOpen="watchOpen" 
    @watchClose="watchClose"
></pop> `

4、属性说明

属性名 类型 默认值 必填 作用 说明
direction String below 弹窗方向 below(下边);up(上边);left(左边) ;right(右边);center(中间)
is_close Boolean true 是否显示关闭按钮 点击即可关闭弹窗
is_mask: Boolean true 是否显示遮罩层 点击即可关闭弹窗(maskFun值在true情况下)
maskFun Boolean true 是否点击遮罩关闭弹窗 遮罩为显示情况下才可生效
width Number 100 弹窗的宽度 单位(%)。建议只在上、下方向弹窗使用100(满值)
height String fit-content 弹窗内容的固定高度 默认是根据内容支撑高度,可进行修改成自定义高度:如height='150rpx'(支持rpx,px,%,请将单位带上)
watchOpen Function - - 监听弹窗打开事件 -
watchClose Function - - 监听弹窗关闭事件 -

5、显示弹窗

页面内通过ref调用组件的show方法进行打开弹窗(使用组件先挂入ref:ref="pop")。

this.$refs.pop.show();

6、关闭弹窗

页面内通过ref调用组件的close方法关闭弹窗。

this.$refs.pop.close(); 

也可通过点击 关闭图标 或者 遮罩层 进行关闭。


7、弹窗展示内容的位置

直接放在组件标签内即可

<pop  
    ref="pop" 
    direction="below" 
    :is_close="true" 
    :is_mask="true" 
    :width="100"  
    height="fit-content" 
    :maskFun="true" 
    @watchOpen="watchOpen" 
    @watchClose="watchClose"
>
    <div>这是我弹窗内的内容</div>
</pop> `

温馨提示

1、由于演示是在同个页面切换不同方向演示的,会出现弹出动画方向错位!建议根据属性direction值来使用,切勿混用(如:direction值为:"below",却点击不是下边方向的触发)则不会出现动画方向错位。

2、导入插件后,请重新启动项目!




独立原生组件;不依赖任何第三方;简单实用;封装方便;一直更新!

记得五星好评哟~~~

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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