以v-model與promise兩種方式實(shí)現(xiàn)vue彈窗組件
最近公司有一個后臺業(yè)務(wù)雖然也是寫在了現(xiàn)有的后臺系統(tǒng)中，但是之后要為這個業(yè)務(wù)單獨(dú)拉出來新建一個后臺系統(tǒng),所以現(xiàn)有的后臺系統(tǒng)中的vue組件庫，就不能用了(因?yàn)椴恢缹淼南到y(tǒng)要基于什么組件庫，以防給未來移植項(xiàng)目帶來麻煩),這次業(yè)務(wù)中又遇到了彈窗的功能,所以只能手動寫一個了(雖然說彈窗組件很簡單，也是想自己總結(jié)一下，有不對的地方也請指出)，一開始用傳統(tǒng)的props,$emit但是覺得要接兩個取消與確認(rèn)的回調(diào)這塊的邏輯分散了所以就用了promise兩個回調(diào)的方式把兩個回調(diào)寫在了一起,并不一定好，算是提供一種思路吧。
一.概覽
先看最后的調(diào)用方式
props $emit方式
<chat-modal ref="chat-modal" v-model="showModal" cancelText="取消" sureText="確認(rèn)" title="彈窗標(biāo)題" small @on-ok="onOK" @on-cancel="onCancel">
<div>slot的東西,想向彈窗中添加自定義的內(nèi)容</div>
</chat-modal>
methods: {
display() {
this.showModal = true;//交互點(diǎn)擊手動觸發(fā)顯示彈窗
},
onOK() {},//點(diǎn)擊確認(rèn)的回調(diào)
onCancel() {}//點(diǎn)擊取消的回調(diào)
}
promise的回調(diào)方式
<chat-modal ref="chat-modal"></chat-modal>
methods: {
display() {
this.$refs["chat-modal"].openModal({
title: "彈窗標(biāo)題",
sureText: "確認(rèn)",
cancelText: "取消"
}).then(res => {
//點(diǎn)擊確認(rèn)的回調(diào)
}, res => {
//點(diǎn)擊取消的回調(diào)
})
}
}
第二種方式的好處就是把所有的邏輯都集中到了一個方法里。
二.看下組件的源碼
tip: 樣式有些爛...
<template>
<div>
<div class="shadow" v-show="showModal"></div>
<div class="modal" :class="{'smSize': otherText.small || small}" v-show="showModal">
<div class="header">{{ otherText.title || title}}</div>
<div class="body">
<slot></slot>
</div>
<div class="footer">
<div class="item success" id="sure" ref="sure" @click="makeSure" v-show="otherText.sureText || sureText">{{ otherText.sureText || sureText }}</div>
<div class="item red" id="cancel" ref="cancel" @click="makeCancel" v-show="otherText.cancelText || cancelText">{{ otherText.cancelText || cancelText }}</div>
</div>
</div>
</div>
</template>
<script>
//此組件提供兩種調(diào)用方法,可以在組件上v-model一個表示是否顯示彈窗的對話框，然后需要的一些值通過props傳入，然后$emit在組件上@監(jiān)聽做回調(diào)
//第二中方法所有的傳值回調(diào)都只需要在組件內(nèi)部的一個方法調(diào)用然后在組件外部this.$refs[xxx].open調(diào)用然后.then觸發(fā)回調(diào)，比上一種方便些
var initOtherText = {
sureText: "",
cancelText: "",
title: "",
small: false
};
export default {
props: {
title: {
type: String
},
sureText: {
type: String
},
cancelText: {
type: String
},
value: {
type: Boolean
},
small: {
type: Boolean
}
},
watch: {
value(newVal) {
this.showModal = newVal;
}
},
data() {
return {
otherText: JSON.parse(JSON.stringify(initOtherText)),
showModal: this.value
};
},
methods: {
makeSure() {
this.$emit("on-ok");
this.$emit("input", false);
},
makeCancel() {
this.$emit("on-cancel");
this.$emit("input", false);
},
openModal(otherText) {
this.otherText = { ...otherText };
this.showModal = true;
var pms = new Promise((resolve, reject) => {
this.$refs["sure"].addEventListener("click", () => {
this.showModal = false;
resolve("點(diǎn)擊了確定");
});
this.$refs["cancel"].addEventListener("click", () => {
this.showModal = false;
reject("點(diǎn)擊了取消");
});
});
return pms;
}
}
};
</script>
<style lang="scss" scoped>
.shadow {
background-color: rgba(0, 0, 0, 0.5);
display: table;
height: 100%;
left: 0;
position: fixed;
top: 0;
transition: opacity 0.3s ease;
width: 100%;
z-index: 50;
}
.modal {
display: table-cell;
vertical-align: middle;
overflow-x: hidden;
position: fixed;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.33) 0px 2px 8px;
border-radius: 5px;
outline: 0px;
overflow: hidden;
transition: all 0.3s ease;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -300px;
}
.header {
align-items: center;
background-color: #62a39e;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
color: #fff;
font-weight: bold;
display: -ms-flexbox;
display: flex;
height: 3.5rem;
padding: 0 1.5rem;
position: relative;
z-index: 1;
}
.body {
align-items: center;
padding: 1.5rem;
}
.footer {
justify-content: flex-end;
padding: 1.5rem;
position: absolute;
bottom: 0;
width: 100%;
float: right;
}
.item {
color: white;
text-align: center;
border-radius: 5px;
padding: 10px;
cursor: pointer;
display: inline-block;
}
.info {
background-color: #2196f3;
}
.success {
background-color: #62a39e;
}
.red {
background-color: #e95358;
}
.smSize {
height: 200px;
}
</style>
首先分析一下第一種方式: 調(diào)用者需要在組件外部v-model上綁定一個變量(例中為showModal)來指示彈窗是否顯示,顯示的時候需要在組件外部手動設(shè)置 this.showModal = true ,組件內(nèi)部props定義一個屬性來接這個值為 value: {type: Boolean} ,同時在組件內(nèi)部在用聲明一個變量用來同步外部傳進(jìn)來的props值 默認(rèn)值為 showModal: this.value (內(nèi)部聲明的值也叫了showModal)，在watch中監(jiān)聽進(jìn)行同步 watch: { value(newVal) { this.showModal = newVal } } ;然后把組件內(nèi)部的這個showModal值綁定在需要顯示或者隱藏的DOM元素上。向外拋出事件的時候是在點(diǎn)擊組件內(nèi)部的確定與關(guān)閉按鈕時候
makeSure() {
this.$emit("on-ok");
this.$emit("input", false);
},
makeCancel() {
this.$emit("on-cancel");
this.$emit("input", false);
}
this.$emit("on-ok");this.$emit("on-cancel"); 這兩句的是向外拋出事件在組件外部@接一下然后寫自己需要的回調(diào)函數(shù)。這時就可以實(shí)現(xiàn)彈窗的顯示與隱藏了，你可能發(fā)現(xiàn)并沒有一句代碼去設(shè)置this.showModal = false;彈窗就隱藏了。主要是因?yàn)檫@幾句代碼 v-model = 'showModal' 和 組件內(nèi)部的 props: {value: {type: Boolean}} this.$emit("input", false) 。v-model其實(shí)是vue的語法糖, <chat-modal v-model="showModal"> 其實(shí)可以寫為 <chat-modal :value="showModal" @input="showModal = arguments[0]"> 所以要求我們在組件內(nèi)部必須規(guī)定props的名字必須為value, 然后在組件內(nèi)部觸發(fā)確定或者取消的時候在組件內(nèi)部觸發(fā) this.$emit("input", false) 這樣實(shí)現(xiàn)了直接隱藏彈窗而不必打擾用戶讓用戶在組件外部在手動將showModal置為false.
然后來看promise的方式： 第一種方式傳進(jìn)來的值都通過props來接的，這種方式通過在組件內(nèi)部定義了另一個對象來接傳進(jìn)來的值,
var initOtherText = {
sureText: "",
cancelText: "",
title: "",
small: false
};
otherText: JSON.parse(JSON.stringify(initOtherText)),
然后在menthods里定義了一個名為openModal的方法,然后把傳進(jìn)來的一系列參數(shù)賦值給組件內(nèi)部的對象 this.otherText = { ...otherText }; this.showModal = true; 并且將showModal置為true,然后每次觸發(fā)的時候新建一個promise對象，里面的異步事件為點(diǎn)擊確定和取消的兩個點(diǎn)擊事件,這里要操作DOM了
this.$refs["sure"].addEventListener("click", () => {
this.showModal = false;
resolve("點(diǎn)擊了確定");
});
獲取確定按鈕的DOM元素綁定點(diǎn)擊事件，回調(diào)里將showModal置為false并且resolve,
this.$refs["cancel"].addEventListener("click", () => {
this.showModal = false;
reject("點(diǎn)擊了取消");
});
獲取取消按鈕的DOM綁定點(diǎn)擊事件，回調(diào)里reject.
遇到的坑
這之前遇到了一個坑，因?yàn)榈谝淮我呀?jīng)綁定了點(diǎn)擊事件，第二次resolve和reject就會失敗，本想取消一下綁定事件，但是因?yàn)閷⒄麄€彈窗v-show="showModal"的原因整個DOM被display:none;了就不需要手動解綁了。 第二個是關(guān)于用v-if還是v-show來隱藏彈窗,一開始用的是v-if但是發(fā)現(xiàn)在這步時
this.showModal = true;
var pms = new Promise((resolve, reject) => {
this.$refs["sure"].addEventListener.xxx//省略
});
return pms;
將showModal置為true時然后就去綁定事件這時候還沒有DOM還沒有解析玩DOM樹上還沒有,要不就得用this.$nextTick增加了復(fù)雜度，最后采用了v-show；
關(guān)于優(yōu)先級問題
如果既在組件上用prop傳了值(title,sureText之類的)如 <chat-modal" title="xx" sureText="xxx"></chat-modal> 也在方法里傳了
this.$refs["chat-modal"].openModal({
title: "服務(wù)小結(jié)",
sureText: "提交并結(jié)束",
cancelText: "取消"
}).then();
是以方法的優(yōu)先級為高，在組件內(nèi)部DOM元素上通過||設(shè)置了優(yōu)先級，比如 <div class="header popModal">{{ otherText.title || title}}</div> 有方法的值取方法的值，沒有取props得值。
總結(jié)
以上所述是小編給大家介紹的以v-model與promise兩種方式實(shí)現(xiàn)vue彈窗組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue3+vite自定義封裝vue組件發(fā)布到npm包的全過程
當(dāng)市面上主流的組件庫不能滿足我們業(yè)務(wù)需求的時候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫,下面這篇文章主要給大家介紹了關(guān)于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關(guān)資料,需要的朋友可以參考下2022-09-09
在前端開發(fā)中,部署項(xiàng)目是我們經(jīng)常發(fā)生的事情,下面這篇文章主要給大家介紹了關(guān)于部署vue項(xiàng)目到docker的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選
這篇文章主要介紹了使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本篇文章主要介紹了vue源碼看觀察者模式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue3中Element Plus Table(表格)點(diǎn)擊獲取對應(yīng)id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點(diǎn)擊獲取對應(yīng)id方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue.prototype詳解及使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vite+vue3+ts項(xiàng)目中提示無法找到模塊的問題及解決
這篇文章主要介紹了vite+vue3+ts項(xiàng)目中提示無法找到模塊的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue + Scss 動態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼
這篇文章主要介紹了Vue + Scss 動態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue + Elementui實(shí)現(xiàn)多標(biāo)簽頁共存的方法
這篇文章主要介紹了Vue + Elementui實(shí)現(xiàn)多標(biāo)簽頁共存的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vuex中this.$store.commit和this.$store.dispatch的基本用法實(shí)例
在vue的項(xiàng)目里常常會遇到父子組件間需要進(jìn)行數(shù)據(jù)傳遞的情況,下面這篇文章主要給大家介紹了關(guān)于vuex中this.$store.commit和this.$store.dispatch的基本用法的相關(guān)資料,需要的朋友可以參考下2023-01-01