给大家推荐一个基于VUE好用的弹出框

开始使用

npm i @yik_l/alert -S

局部注册组件

<template>
    <div id="app">
        <YikAlert v-model="show"></YikAlert>
    </div>
</template>
import YikAlert from '@yik_l/alert'
export default {
  data() {
    return {
      show: true,
    }
  },
  components: { YikAlert },
}    

全局注册组件

import YikAlertfrom "@yik_l/alert";
Vue.use(YikAlertfrom);
<template>
    <div id="app">
        <YikAlert v-model="show"></YikAlert>
    </div>
</template>

子组件如何关闭父组件的弹出？

// 使用以下代码关闭弹出框，$parent是vue实例中的属性
this.$parent.closeScreen()

props

props: {
    value: {
      type: Boolean,
      default: false,
    },
    // 标题
    title: {
      type: String,
      default: '这是一个标题',
    },
    // 开启遮蔽
    mask: {
      type: Boolean,
      default: true,
    },    
    // 宽度
    w: {
      type: String,
      default: '650px',
    },
    // 高度
    h: {
      type: String,
      default: '450px',
    },
    /**
     * 动画
     * zoom 缩放
     * top  从上往下
     * left 从左往右
     */
    animeType: {
      type: String,
      default: 'zoom',
    },
    /**
     * 隐藏主体时，顺序
     */
    sort: {
      type: Number,
      default: 1,
    },
},

视频弹出效果及教程，下载此文件

https://vkceyugu.cdn.bspapp.com/VKCEYUGU-02ef2b4d-6a6b-4cce-af4e-e27f3205fa1f/34c58573-1592-46e1-af40-1ffde4e7280e.wmv

封赏

https://vkceyugu.cdn.bspapp.com/VKCEYUGU-02ef2b4d-6a6b-4cce-af4e-e27f3205fa1f/e3d304ea-fd24-4a05-9985-d8e795b7f904.jpg