vue 封裝彈出框

dialog.vue

="dialog" v-show=
"showmask" @click.self =
"closemask()"
>
="dialog-container"
>
="dialog-title"
>
}<
/div>
="content"
>
彈窗內容<
/slot>
<
/div>
="btns"
>
"type != 'confirm'"
class
="default-btn" @click=
"closebtn"
>
}<
/div>
"type == 'danger'"
class
="danger-btn" @click=
"dangerbtn"
>
}<
/div>
"type == 'confirm'"
class
="confirm-btn" @click=
"confirmbtn"
>
}<
/div>
<
/div>
="close-btn" @click=
"closemask"
>
="iconfont icon-close"
>
<
/i>
<
/div>
<
/div>
<
/div>
<
/template>
export
default
,// 型別包括 de****t 預設， danger 危險， confirm 確認，
type:
, content:
, title:
, canceltext:
, dangertext:
, confirmtext:,}
,data()
},methods:
,closebtn()
,dangerbtn()
,confirmbtn()
},mounted()
, watch:
,showmask
(val)},
}<
/script>
"less" scoped>
.dialog
.content
.inp
}.btns
.default
-btn
}.danger-btn
&:active
}.confirm-btn}}
.close-btn}}
}<
/style>

="self-modal" v-show=
'show' @click.self=
"cancelclick" v-bind:style=
"styleobj" @touchmove.stop.prevent>
<
!-- 自定義內容 --
>
<
/slot>
<
/div>
<
/template>
export
default},
props:
, styleobj:}}
},watch:},
methods:
,function()
)},// 取消
cancelclick()
,function()
)}}}
<
/script>
'less'
>
.self-modal
<
/style>

="hello"
>
"btn"
>hhhhh<
/button>
"incomeselect" v-model=
"vis"
:styleobj=
"styleobj"
>
="hh"
>
hhhhhhhhhhh
<
/div>
<
/self-modal>
<
/div>
"openmask"
>開啟彈窗<
/div>
"sendval" type=
"danger" title=
"我是標題" v-on:cancel=
"clickcancel()" @danger=
"clickdanger()" @confirm=
"clickconfirm()" dangertext=
"delete"
>
這是使用了插槽,如果沒有插槽,這裡的內容不會顯示 <
/p>
<
/slot>
<
/dialog-bar>
<
/div>
<
/template>
import selfmodal from
'./popup'
import dialogbar from
'./dialog'
export
default
,data()
,}},
mounted()
, methods:
else},
getincome()
,openmask()
,clickcancel()
,clickdanger()
,clickconfirm()
}}<
/script>
<
!-- add "scoped" attribute to limit css to this component only --
>
"less"
>
h3 ul 
li a 
.hh 
<
/style>

如何使用Vue封裝彈框元件

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

vue 封裝dialog vue自定義封裝彈框元件

1.新建乙個新元件命名命名為alertbox.vue 一.dom結構 提示 否是 二.script export default props isshowalert message data return isshowdialogs true methods isshowrefruct this.i...

vue模態框元件封裝

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