如何使用Vue封裝彈框元件

2021-10-06 14:45:46 字數 478 閱讀 3044

這是封裝元件

// 其呼叫的元件slot傳值問題,沒有的話是顯示預設值

如果沒傳預設title

如果沒傳預設content

確定取消

樣式自行模擬…

這是其呼叫的元件(父元件)

顯示隱藏

// 這裡可以使用slot去傳資料

-->

樣式自行模擬

這裡呢寫的也比較簡單,具體的話看**需求了,畢竟沒有需求,只能自己模擬去寫

大體思路就是:

1.你想向使用者暴露哪些屬性 (props)

2.你想向使用者暴露哪些事件,讓使用者監聽來處理後續的業務 ($emit,@)

3.你想讓使用者嵌入哪些自定義的內容(slot)

vue 封裝彈出框

dialog.vue dialog v show showmask click.self closemask dialog container dialog title div content 彈窗內容 slot div btns type confirm class default btn cli...

vue模態框元件封裝

示例 一般彈框 提示文字樣式 單個按鈕 多個按鈕 圓角按鈕 按鈕顏色 遮罩不可點 自定義彈窗內容 我是自定內容 常用大按鈕 export default modal4 false,button4 modal5 false,modal6 false,button6 modal7 false,modal...

vue 封裝模態框元件

doctype html html head meta charset utf 8 title 模態框元件 title style p,h4 modal modal header modal content div modal footer btn blue style script src js ...