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

舉個栗子

<div id="app">
    <KDialog :visible.sync="visible"
             iconButton
             title="有title slot 我是無效的">
      <div slot="title">title</div>
      body
      <div slot="footer">footer</div>
    </KDialog>
    <button @click="visible = !visible">show</button>
  </div>

效果：

那啥

也有考慮升vue3.0
如果有什麼寫的很爛的地方，請指教！
我只是一個20屆的卑微應屆生