Vue.js彈出模態(tài)框組件開發(fā)的示例代碼
前言
在開發(fā)項目的過程中，經(jīng)常會需要開發(fā)一些彈出框效果，但原生的alert和confirm往往都無法滿足項目的要求。這次在開發(fā)基于Vue.js的讀書WebApp的時候總共有兩處需要進行提示的地方，因為一開始就沒有引入其他的組件庫，現(xiàn)在只好自己寫一個模態(tài)框組件了。目前只是一個僅滿足當前項目需求的初始版本，因為這個項目比較簡單，也就沒有保留很多的擴展功能。這個組件還是有很多擴展空間的，可以增加更多的自定義內(nèi)容和樣式。這里只介紹如何去開發(fā)一個模態(tài)框組件，有需要進行更多擴展的，可以根據(jù)自己的需求自行開發(fā)。
組件模板
<template>
<div class="dialog">
<div class="mask"></div>
<div class="dialog-content">
<h3 class="title">{{ modal.title }}</h3>
<p class="text">{{ modal.text }}</p>
<div class="btn-group">
<div class="btn" @click="cancel">{{ modal.cancelButtonText }}</div>
<div class="btn" @click="submit">{{ modal.confirmButtonText }}</div>
</div>
</div>
</div>
</template>
模態(tài)框結構分為：頭部標題、提示內(nèi)容和操作區(qū)域。同時一般還會有一個遮罩層。此次需求比較簡單，也無需圖標等內(nèi)容，所以結構上寫的也比較簡單。實際開發(fā)中可根據(jù)需求對結構進行相應的調(diào)整。
組件樣式
.dialog {
position: relative;
.dialog-content {
position: fixed;
box-sizing: border-box;
padding: 20px;
width: 80%;
min-height: 140px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
background: #fff;
z-index: 50002;
.title {
font-size: 16px;
font-weight: 600;
line-height: 30px;
}
.text {
font-size: 14px;
line-height: 30px;
color: #555;
}
.btn-group {
display: flex;
position: absolute;
right: 0;
bottom: 10px;
.btn {
padding: 10px 20px;
font-size: 14px;
&:last-child {
color: #76D49B;
}
}
}
}
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 50001;
background: rgba(0,0,0,.5);
}
}
樣式比較簡單，就不多說了。
組件接口
export default {
name: 'dialog',
props: {
dialogOption: Object
},
data() {
return {
resolve: '',
reject: '',
promise: '', // 保存promise對象
}
},
computed: {
modal: function() {
let options = this.dialogOption;
return {
title: options.title || '提示',
text: options.text,
cancelButtonText: options.cancelButtonText ? options.cancelButtonText : '取消',
confirmButtonText: options.confirmButtonText ? options.confirmButtonText : '確定',
}
}
},
methods: {
//確定,將promise斷定為完成態(tài)
submit() {
this.resolve('submit');
},
// 取消,將promise斷定為reject狀態(tài)
cancel() {
this.reject('cancel');
},
//顯示confirm彈出,并創(chuàng)建promise對象，給父組件調(diào)用
confirm() {
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
return this.promise; //返回promise對象,給父級組件調(diào)用
}
}
}
在模態(tài)框組件中定義了三個方法，核心的方法是confirm，此方法是提供給父級組件調(diào)用的，返回一個promise對象。使用promise對象主要是為了異步調(diào)用，因為很多時候我們使用模態(tài)框時需要根據(jù)返回結果再進行下一步處理。
擴展提示：
如果需要擴展的話，可以通過props的dialogOption傳遞更多的字段，在computed中進行判斷，比如增加一個字段isShowCancelButton可以控制取消按鈕是否顯示。其他擴展同理。
調(diào)用
<v-dialog v-show="showDialog" :dialog-option="dialogOption" ref="dialog"></v-dialog>
this.showDialog = true;
this.$refs.dialog.confirm().then(() => {
this.showDialog = false;
next();
}).catch(() => {
this.showDialog = false;
next();
})
源碼地址
實現(xiàn)效果
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue中el-table實現(xiàn)自動吸頂效果(支持fixed)
本文主要介紹了vue中el-table實現(xiàn)自動吸頂效果，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
VUE使用docxtemplater導出word文檔實例(帶圖片)
docxtemplate支持的功能很多,語法包含變量替換、條件判斷、循環(huán)、列表循環(huán)、表格循環(huán)等,下面這篇文章主要給大家介紹了關于VUE使用docxtemplater導出word功能(帶圖片)的相關資料,需要的朋友可以參考下2023-06-06
vue?this.$router和this.$route區(qū)別解析及路由傳參的2種方式?&&?this.$route
this.$router?相當于一個全局的路由器對象,包含了很多屬性和對象（比如?history?對象）,任何頁面都可以調(diào)用其?push(),?replace(),?go()?等方法,本文給大家介紹Vue中this.$router與this.$route的區(qū)別?及push()方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
vue-router beforeEach跳轉路由驗證用戶登錄狀態(tài)
這篇文章主要介紹了vue-router beforeEach跳轉路由驗證用戶登錄狀態(tài),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要給大家介紹了關于Vue3中watch用法與最佳實踐的相關資料,watch的作用可以監(jiān)控一個值的變換,并調(diào)用因為變化需要執(zhí)行的方法,可以通過watch動態(tài)改變關聯(lián)的狀態(tài),需要的朋友可以參考下2021-07-07
這篇文章主要為大家詳細介紹了Vue組件實現(xiàn)數(shù)字滾動抽獎效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue3+vantUI3時間組件封裝過程支持選擇年以及年月日時分秒
這篇文章主要介紹了Vue3+vantUI3時間組件封裝過程支持選擇年以及年月日時分秒,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue在.js文件中如何進行路由跳轉，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue中常用rules校驗規(guī)則，本文通過實例代碼個大家介紹了一些校驗方法,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了VUE項目實現(xiàn)主題切換的方法，本文通過多種方法給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11