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.js"
>
script
>
head
>
<
body
>
<
div
id>
<
m-modal
modal-title
="提醒"
@on-ok
="ok"
>
m-modal
>
<
m-modal
>
<
ul slot
="modal-content"
>
<
li v-for
="item of list"
>}
li>
ul>
<
div
slot
="modal-footer"
>
<
span
>確定
span
>
<
span
>重置
span
>
<
span
>返回
span
>
div>
m-modal
>
<
m-modal
@on-cancel
="cancel"
>
m-modal
>
div>
body
>
<
script
>
/*設定的props:
modaltitle提醒訊息預設為'這是乙個模態框'
定製模板
slot 為modal-content 定製提醒資訊模板
slot 為modal-footer 定製底部模板
監控子元件狀態變化
事件名on-ok 點選確定觸發
事件名on-cancel 點選取消觸發
*/vue.component(
"m-modal",
},template:`
<
div class="
modal
">
<
div class="
modal-header
">
<
h4>
}<
/h4>
<
/div>
<
div class="
modal-content
">
<
div>
<
slot name="
modal-content
">
在這裡新增內容
<
/slot>
<
/div>
<
/div>
<
div class="
modal-footer
">
<
slot name="
modal-footer
">
<
input class="
btn blue
"type="
button
"value="
確定"@click="
okhandle
"/>
<
input class="
btn"
type="
button
"value="
取消"@click="
cancelhandle
"/>
<
/slot>
<
/div>
<
/div>
`, methods:,
cancelhandle()
}});
varlist
=[...
'妙味課堂']
vue模態框元件封裝
示例 一般彈框 提示文字樣式 單個按鈕 多個按鈕 圓角按鈕 按鈕顏色 遮罩不可點 自定義彈窗內容 我是自定內容 常用大按鈕 export default modal4 false,button4 modal5 false,modal6 false,button6 modal7 false,modal...
如何使用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 匯入...