vue2.x 三级弹窗

三级弹窗

在实际中遇到了某种场景，需要使用三级弹窗，放大或缩小弹窗，所以自己封装了一个。

大概就是这个样子，录屏转换gif有点模糊和卡。

发布到npm上去了

npm i kc-dialog

然后main.js
其实我也不想起这么长的名字，别人都快我好多步

import KDialog from 'kc-dialog';
import 'kc-dialog/dist/KDialog.css'
Vue.use(KDialog)

配置项

• 属性

参数	说明	类型	可选值	默认值
visible	是否显示 Dialog，支持 .sync 修饰符	boolean	——	false
title	Dialog 的标题，也可通过具名 slot 传入	string	——	提示
width	Dialog 的宽度	string	——	30%
mask	是否需要遮罩层	boolean	——	true
maskClick	点击遮罩关闭dialog	boolean	——	true
level	放大等级，0 面板模式， 1 弹窗模式， 2 全屏模式	number	——	1
iconButton	是否需要放大缩小功能	boolean	——	false
iconClose	是否需要关闭图标按钮	boolean	——	true
iconClassName	图标样式类名	String	——	’ ’

• 方法

事件名称	说明	回调参数
dialog-amplification	放大回调	level
dialog-shrink	缩小回调	level
dialog-close	关闭回调	——

• 插槽

name	说明
title	标题slot
—	默认slot，dialog内容
footer	底部slot

举个栗子

    
      
title
      body
      
footer
    
    show
  

效果：

那啥

也有考虑升vue3.0
如果有什么写的很烂的地方，请指教！
我只是一个20届的卑微应届生