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

开始使用

1	`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>

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

1 2	`// 使用以下代码关闭弹出框，$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,
    },
},