簡單介紹一下vue中常用dialog組件的封裝：
實現動態傳入內容，實現取消，確認等回調函數。
首先寫一個基本的彈窗樣式，如上圖所示。
在需要用到彈窗的地方中引入組件：
import dialogBar from './dialog.vue'components:{ 'dialog-bar': dialogBar,},<dialog-bar></dialog-bar>點擊一個按鈕顯示彈窗，并保證關閉彈窗后再次點擊依舊顯示
在彈窗組件中定義一個value值：v-model="sendVal"，sendVal初始值為false。
在打開彈窗的方法中賦值：
openMask(){ this.sendVal = true;}在dialog.vue組件中做如下操作：
props: { value: {} // 注意此處獲取的value對應的就是組件標簽中的v-model}定義一個showMask變量用于控制是否顯示彈窗
mounted(){ this.showMask = this.value; // 在生命周期中，把獲取的value值獲取給showMash},watch:{ value(newVal, oldVal){ this.showMask = newVal; // 監測value的變化，并賦值。 }, showMask(val) { this.$emit('input', val); // 此處監測showMask目的為關閉彈窗時，重新更換value值，注意emit的事件一定要為input。 }},而要想關閉彈窗，只需要定義一個方法：
closeMask(){ this.showMask = false;},此刻已經可以實現彈窗的顯示與退出。
下面我們要實現的是動態添加標題，內容等，在組件標簽中加入title，content：
<dialog-bar title="我是標題" content="我是內容"></dialog-bar>
可以運用vue的數據雙向綁定，更換title，content。
在dialog.vue中獲取內容：
props: {value: {}, content: { type: String, default: '' }, title: { type: String, default: '' },},<div class="dialog-title">{{title}}</div><div class="content" v-html="content"></div>我們可以運用同樣的原理來獲取不同按鈕中的自定名稱。
下面我們利用傳入的不同type來確定不同的按鈕，并提供不同的回調函數。
<dialog-bar title="我是標題" content="我是內容" type="danger" dangerText="這是刪除按鈕"></dialog-bar>
如傳入type為danger，我們可以在dialog.vue中props獲取type，并定義一個如下按鈕：
<div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn"> {{dangerText}}</div>dangerBtn(){ this.$emit('danger'); // 發送一個danger事件作為回調函數 this.closeMask(); // 關閉彈窗},在標簽中定義danger的回調并做一些操作：
<dialog-bar title="我是標題" content="我是內容" type="danger" dangerText="這是刪除按鈕" @danger="clickDanger()"></dialog-bar>clickDanger(){ console.log("這里是回調函數")},同樣原理可以獲取和增添一些其他的操作：
props: { value: {}, // 類型包括 defalut 默認， danger 危險， confirm 確認， type:{ type: String, default: 'default' }, content: { type: String, default: '' }, title: { type: String, default: '' }, confirmText: { type: String, default: '確認' }, cancelText: { type: String, default: '取消' }, dangerText: { type: String, default: '刪除' }, },<div class="btns"> <div v-if="type != 'confirm'" class="default-btn" @click="closeBtn"> {{cancelText}} </div> <div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn"> {{dangerText}} </div> <div v-if="type == 'confirm'" class="confirm-btn" @click="confirmBtn"> {{confirmText}} </div></div>點擊此處去github下載彈窗代碼： https://github.com/wwjhzc/vue-dialog
總結
以上所述是小編給大家介紹的使用vue實現各類彈出框組件,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
