vue模態框元件封裝

2021-10-05 07:14:49 字數 1221 閱讀 6515

示例**

}-->

一般彈框

提示文字樣式

單個按鈕

多個按鈕

圓角按鈕

按鈕顏色

遮罩不可點

自定義彈窗內容

我是自定內容

常用大按鈕

export default ],

modal4: false,

button4: [, , ],

modal5: false,

modal6: false,

button6: [, ],

modal7: false,

modal8: false,

modal9: false,

email: ''}},

methods: ,

show2 () ,

show3 () ,

show4 () ,

show5 () ,

show6 () ,

show7 () ,

show8 () ,

hide () ,

hide2 () ,

hide3 () ,

hide4 () ,

hide5 () ,

hide6 () ,

hide7 () ,

hide8 () ,

handleclick (e) else

// this.hide()

},handleclick2 (e) else

this.hide2()

},handleclick3 (e)

this.hide3()

},handleclick4 (e) ,

handleclick5 (e) ,

handleclick6 (e) ,

handleclick7 (e) ,

handleclick8 () ,}}

元件**

}}

2?'mio-mbtm':'',

shape=='circle'?'mio-circle-btn':'']"

:hover-class="'mio-'+(item.plain?'outline':(item.type || 'primary'))+'-hover'" :data-index="index" @tap="handleclick">}

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 ...

如何使用Vue封裝彈框元件

這是封裝元件 其呼叫的元件slot傳值問題,沒有的話是顯示預設值 如果沒傳預設title 如果沒傳預設content 確定取消 樣式自行模擬 這是其呼叫的元件 父元件 顯示隱藏 這裡可以使用slot去傳資料 樣式自行模擬 這裡呢寫的也比較簡單,具體的話看 需求了,畢竟沒有需求,只能自己模擬去寫 大體...

vue 封裝元件

一 通過install 封裝 1 建立元件資料夾包含 vue檔案和對應的.js檔案 如圖 2 完成元件模板 這是乙個公共元件內容 3 在相應的js內註冊元件 list.js檔案 import mylist from list.vue const list export default list 匯入...