怎么用vue編寫(xiě)彈出框組件
小編給大家分享一下怎么用vue編寫(xiě)彈出框組件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為瓊山企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)，瓊山網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
為什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。
設(shè)計(jì)組件的思考
其實(shí)單純的編寫(xiě)一個(gè)彈出框組件并不難，寫(xiě)一個(gè)模板，然后用v-if或者v-show指令還控制組件的出現(xiàn)與消失。真正困擾我的是，這個(gè)組件的調(diào)用方式，這個(gè)問(wèn)題糾結(jié)了我好久。
調(diào)研了下資料，有些人建議，直接把組件標(biāo)簽插進(jìn)模板中，然后通過(guò)直接控制組件的顯示隱藏來(lái)控制組件。這樣寫(xiě)有好處，就是結(jié)構(gòu)清晰，一目了然，人家一看你的代碼就知道你這個(gè)頁(yè)面可能會(huì)有彈出框，并且編寫(xiě)的組件就更容易，只需關(guān)注內(nèi)部方法就好了，也不存在事件調(diào)用的困擾，維護(hù)起來(lái)也特別容易。但是缺點(diǎn)也很明顯，如果有多個(gè)彈窗，并且不知道會(huì)有幾個(gè)彈窗的情況下，感覺(jué)就不太好做，并且這種提前寫(xiě)模板的形式，難免會(huì)在不彈窗的時(shí)候要下載一些js文件，有可能會(huì)造成性能浪費(fèi)。
也有些人建議，在寫(xiě)好的彈出框組件之外再做一層封裝，通過(guò)動(dòng)態(tài)調(diào)用的方式來(lái)控制彈出框的顯示與隱藏。這樣寫(xiě)的好處是不用事先在模板里面寫(xiě)好該組件的標(biāo)簽，只需要在想調(diào)用的地方調(diào)用下該組件，就實(shí)現(xiàn)了按需使用的目的，符合之前傳統(tǒng)前端框架的編碼習(xí)慣。缺點(diǎn)就是感覺(jué)代碼寫(xiě)起來(lái)比較復(fù)雜，層層嵌套，并且感覺(jué)這個(gè)與MVVM模式的狀態(tài)驅(qū)動(dòng)界面的思想相違背。
于是我天秤座的糾結(jié)病犯了，在選擇哪種技術(shù)方案的問(wèn)題上，思考了很久。但是網(wǎng)上搜了很多，發(fā)現(xiàn)還是后一種實(shí)現(xiàn)方法用的人比較多。后來(lái)我又研究了了elementUI和iView的彈出框組件，他們也是沿用的后一種方法，想了一下后一種方法雖然代碼易讀性不強(qiáng)，但是它真正模擬了瀏覽器默認(rèn)的alert事件，在用戶需要的地方來(lái)調(diào)用，一方面節(jié)省了代碼量，另一方面也很容易解決多個(gè)彈窗的情況。最后還是決定用這種模式寫(xiě)一個(gè)簡(jiǎn)單的彈出框組件。主要是體會(huì)這其中的機(jī)理。廢話不多說(shuō)，來(lái)上干貨了。有啥不對(duì)的地方還請(qǐng)大家多多指教。(ps:對(duì)于天秤座的我，雖然選擇了后一種方法，但是內(nèi)心還是鐘愛(ài)第一種方法，并且后一種方法并沒(méi)有足夠的理由說(shuō)服我呀，不知道哪位有識(shí)之士能夠幫忙點(diǎn)醒一下我，晚輩感激不盡)。
alert組件設(shè)計(jì)
單獨(dú)的設(shè)計(jì)alert彈出框的邏輯是很簡(jiǎn)單的，我就直接上代碼了：
<template>
<transition name='fade'>
<div class="alert" v-if="showAlert">
<div class="wrap">
<div class="head">{{title}}</div>
<div class="body">
<slot>
<p>{{message}}</p>
</slot>
</div>
<div class="foot">
<div v-if="type === 'confirm'">
<button class="btn-base" @click="sure">確定</button>
<button class="btn-gray" @click="cancel">取消</button>
</div>
<div v-else-if="type === 'inform'">
<button class="btn-base" @click="cancel">知道了</button>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'alert',
data() {
return {
showAlert: false,
};
},
props: {
title: {
type: String,
default: '提示',
},
message: {
type: String,
},
type: { // 可以有confirm, 和inform兩個(gè)類(lèi)型
type: String,
default: 'confirm',
validator(value) {
return value === 'confirm' || value === 'inform';
},
},
sureBtn: {
type: Function,
},
cancelBtn: {
type: Function,
},
context: {
type: Object,
},
},
methods: {
cancel() {
if (this.cancelBtn) {
this.cancelBtn.apply(this.context);
}
this.close();
},
sure() {
if (this.sureBtn) {
this.sureBtn.apply(this.context);
}
this.close();
},
show() {
this.showAlert = true;
},
close() {
this.showAlert = false;
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
.alert {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0, 0.8);
z-index: 1000;
transition: all .3s ease-in-out;
}
.wrap {
position: absolute;
z-index: 1002;
min-width: 400px;
background: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 4px;
}
.head {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #dedede;
padding-left: 10px;
color: #333;
}
.body {
padding: 40px 20px;
text-align: center;
}
.foot {
height: 50px;
text-align: center;
button {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
}
</style>這里只是寫(xiě)了簡(jiǎn)單的功能，并沒(méi)有考慮更復(fù)雜的情況，比如按鈕顏色定制，大小定制，z-index層級(jí)的考慮，遮罩層的統(tǒng)一管理等等，只是為了掌握編寫(xiě)彈出框的主要思想，所以沒(méi)有寫(xiě)太多的情況。這里只細(xì)分了是確認(rèn)框還是通知框，可以定制彈出框的內(nèi)容、標(biāo)題等一些簡(jiǎn)單的常規(guī)操作。
其實(shí)這個(gè)組件寫(xiě)好，就可以在頁(yè)面用起來(lái)了，直接在對(duì)應(yīng)頁(yè)面插入這段，可以也可以用：
<!--template-->
<button @click="showAlert">點(diǎn)我</button>
<alert ref="alert">我是一個(gè)確認(rèn)框</alert>
<!--javascript-->
...
methods: {
showAlert() {
this.$refs.alert.show();
}
}
...當(dāng)然，如果真要這么用，這個(gè)組件還是需要修改一些東西的，比如事件拋出，當(dāng)點(diǎn)擊確定或者取消按鈕的時(shí)候，需要emit對(duì)應(yīng)的事件，以提供給父組件捕獲，并做相應(yīng)的處理。
動(dòng)態(tài)插入到頁(yè)面中
為了能讓組件動(dòng)態(tài)的插入到頁(yè)面中，需要對(duì)上面的組件進(jìn)行封裝，利用Vue.extend機(jī)制，可以輕松的做到這種封裝，直接上代碼：
import Vue from 'vue';
import alert from './alert';
const AlertConstructor = Vue.extend(alert);
const div = document.createElement('div');
AlertConstructor.show = (options) => {
document.body.appendChild(div);
options.type = 'inform';
const propsData = Object.assign({}, options);
const alertInstance = new AlertConstructor({
propsData,
}).$mount(div);
alertInstance.show();
};
AlertConstructor.confirm = (options) => {
document.body.appendChild(div);
options.type = 'confirm';
const propsData = Object.assign({}, options);
const alertInstance = new AlertConstructor({
propsData,
}).$mount(div);
alertInstance.show();
};
export default AlertConstructor;這里，show對(duì)應(yīng)的是通知框，confirm對(duì)應(yīng)的是確認(rèn)框。我知道這種封裝有點(diǎn)簡(jiǎn)單了，有很多情況沒(méi)有考慮，比如有多個(gè)彈出框時(shí)的處理等。這里只是做了簡(jiǎn)單的封裝，為的就是讓大家明白此種封裝主要思路是什么。
以上是“怎么用vue編寫(xiě)彈出框組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站標(biāo)題：怎么用vue編寫(xiě)彈出框組件
文章地址：http://bm7419.com/article32/jcsipc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、網(wǎng)站排名、響應(yīng)式網(wǎng)站、外貿(mào)建站、網(wǎng)站設(shè)計(jì)公司、做網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 網(wǎng)站標(biāo)簽優(yōu)化-關(guān)于H標(biāo)簽的優(yōu)化策略 2016-11-10
- 現(xiàn)網(wǎng)站建設(shè)分析網(wǎng)站Tag標(biāo)簽優(yōu)化幾點(diǎn)如下： 2022-06-04
- 網(wǎng)站標(biāo)題title標(biāo)簽優(yōu)化的重要性 2016-02-19
- 頂級(jí)SEO秘訣分享：Tags標(biāo)簽優(yōu)化 2022-05-25
- 網(wǎng)站優(yōu)化之代碼標(biāo)簽優(yōu)化 2022-05-27
- 網(wǎng)站seo中title標(biāo)簽優(yōu)化技巧 2021-06-14
- 不可忽視的圖片ALT標(biāo)簽優(yōu)化 2017-02-27
- 網(wǎng)站結(jié)構(gòu)和標(biāo)簽優(yōu)化怎么做？ ?? 2014-08-12
- 網(wǎng)站TAG標(biāo)簽優(yōu)化之路 2023-03-28
- 關(guān)于網(wǎng)站標(biāo)簽優(yōu)化你了解多少 2021-09-02
- 談?wù)劸W(wǎng)站Tags標(biāo)簽優(yōu)化方法 2022-06-06
- title標(biāo)簽優(yōu)化 2022-05-27