更新记录

1.0.5（2023-04-14）

1、修复弹窗内容溢出不能滚动问题 2、高度优化问题

1.0.4（2021-08-02）

修复中间弹窗，弹窗会跟着屏幕滚动而滚动！

1.0.3（2021-07-27）

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

平台兼容性

使用方法

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、属性说明

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、导入插件后，请重新启动项目！

---

---

---

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

记得五星好评哟~~~