Vue組件化開(kāi)發(fā)之通用型彈出框的實(shí)現(xiàn)
本文主要分享關(guān)于組件化開(kāi)發(fā)的理解，讓剛?cè)腴T(mén)的小伙伴少走一些彎路，提高開(kāi)發(fā)效率，作者本人也是新手，如有不當(dāng)之處，請(qǐng)大佬指出，感謝。
相信很多剛?cè)腴T(mén)的小伙伴，經(jīng)常會(huì)寫(xiě)很多重復(fù)的代碼，而這些代碼一般情況下也都是大同小異，在這種情況下，如何讓開(kāi)發(fā)和學(xué)習(xí)變得更加高效，組件化的思想就顯得尤為重要。這里通過(guò)設(shè)計(jì)一個(gè)簡(jiǎn)單的彈出框，給小伙伴們分享組件化的應(yīng)用。
組件&組件化
組件化是對(duì)某些可以進(jìn)行復(fù)用的功能進(jìn)行封裝的標(biāo)準(zhǔn)化工作。組件一般會(huì)內(nèi)含自身的內(nèi)部UI元素、樣式和JS邏輯代碼，它可以很方便的在應(yīng)用的任何地方進(jìn)行快速的嵌入。組件內(nèi)部可以使用其他組件來(lái)構(gòu)成更復(fù)雜的組件。
在實(shí)際的開(kāi)發(fā)中，我們應(yīng)該避免去編寫(xiě)重復(fù)的代碼，將精力放在更加核心的部分，因此就需要將這些重復(fù)的代碼抽取出來(lái)，封裝成公共的組件，提高開(kāi)發(fā)效率，但同時(shí)也要注意組件的健壯性和可復(fù)用性，讓它能夠盡可能適應(yīng)更多的場(chǎng)景。
基本結(jié)構(gòu)
首先是彈出框的基本結(jié)構(gòu)
<div class="modal">
<div class="mask"></div>
<div class="modal-dialog">
<div class="modal-header">
<span>標(biāo)題</span>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="icon-close"></a>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn">確定</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default">取消</a>
</div>
</div>
</div>
</div>
基本結(jié)構(gòu)很簡(jiǎn)單，稍微注意一點(diǎn)的就是 slot 插槽，如果沒(méi)有提供name屬性，它將有一個(gè)隱含的名字default，并且在父組件如果沒(méi)有指定 slot 的 v-slot 屬性的話，內(nèi)容會(huì)傳給default插槽。
在這里定義了 slot 的name屬性 body ，這種的叫做具名插槽，會(huì)匹配 v-slot:body 的內(nèi)容。
注意，在父組件中調(diào)用需要用 <template> 包裹，并且 <template> 元素中的所有內(nèi)容都將被傳入相應(yīng)的插槽。
給彈出框加點(diǎn)樣式
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.5;
}
.modal-dialog {
position: absolute;
top: 40%;
left: 50%;
width: 560px;
height: auto;
background-color: #ffffff;
transform: translate(-50%, -50%);
.modal-header {
height: 60px;
background-color: #F5F5F5;
padding: 0 25px;
line-height: 60px;
font-size: 16px;
.icon-close {
position: absolute;
top: 23px;
right: 25px;
width: 14px;
height: 14px;
background: url("/static/img/icon-close.png") no-repeat center;
background-size: contain;
}
}
.modal-body {
padding: 42px 40px 54px;
font-size: 14px;
}
.modal-footer {
height: 82px;
line-height: 82px;
text-align: center;
background-color: #F5F5F5;
}
}
}
我這里使用的是 scss ，使用的時(shí)候別忘了安裝 node-sass 和 sass-loader ，現(xiàn)在我們的頁(yè)面是這個(gè)樣子了
雖然還是不太美觀，但是已經(jīng)基本上是一個(gè)彈出框的雛形了，并且我沒(méi)有給 a 標(biāo)記樣式，原因在后面。
SCSS函數(shù)
回過(guò)頭再看看上面的 css 代碼，這里重復(fù)寫(xiě)了4次固定定位的代碼，而且隨著項(xiàng)目的推進(jìn)，肯定還有更多類似的代碼，何不將這些部分抽取出來(lái)，進(jìn)行封裝呢？ scss 提供了這個(gè)功能，將 css 封裝成函數(shù)，這里的函數(shù)直接會(huì)返回函數(shù)體。我們?cè)谟龅筋愃频那闆r時(shí)，就能夠直接復(fù)用。
在 assets 目錄下新建 scss 文件夾并在里面新建 mixin.scss ，在里面新建 position 函數(shù),代碼如下：
@mixin position($pos: absolute, $top: 0, $left: 0, $w: 100%, $h: 100%) {
position: $pos;
top: $top;
left: $left;
width: $w;
height: $h;
}
接著我們引入 mixin.scss ，用 position 函數(shù)替換我們?cè)鹊拇a
通過(guò)@include方式使用 scss 函數(shù)： @include position(fixed); 括號(hào)里面的是參數(shù)。
關(guān)于按鈕
每一個(gè)網(wǎng)站都有很多按鈕，不過(guò)，同一個(gè)網(wǎng)站的按鈕風(fēng)格大多都是一樣，無(wú)非是大小不一。因此可以單獨(dú)在 scss 文件下新建 button.scss 然后在 App.vue 里面引入這個(gè)文件，在后面除了一些特別的樣式，其它就不需要給按鈕定義樣式了，這樣也便于維護(hù)。這里給出我的 button 文件，可以參考一下。
.btn {
display: inline-block;
width: 110px;
line-height: 30px;
text-align: center;
background-color: #FF6600;
color: #ffffff;
border: none;
cursor: pointer;
}
.btn-default {
background-color: #b0b0b0;
color: #d7d7d7;
}
.btn-large {
width: 202px;
height: 50px;
line-height: 50px;
font-size: 18px;
}
.btn-huge {
width: 300px;
height: 54px;
line-height: 54px;
font-size: 16px;
}
.btn-group {
.btn {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
}
為了復(fù)用
當(dāng)前這個(gè)彈出框還只是一個(gè)固定的結(jié)構(gòu)，它并不能在其他地方復(fù)用，需要進(jìn)行一些處理，將所有可變部分抽取出來(lái)，例如標(biāo)題，按鈕，內(nèi)容。因?yàn)橛胁宀?，所以?nèi)容就不用考慮，需要關(guān)注的是標(biāo)題和按鈕，因?yàn)闃?biāo)題有可能是提示，警告等等，按鈕也有可能是確定、取消的一個(gè)或兩個(gè)都有。而這些信息都是從父組件傳遞過(guò)來(lái)，需要用 props 接收。
在 props 里面添加如下代碼，并給某些屬性指定默認(rèn)值：
props: {
// 彈框標(biāo)題
title: String,
// 按鈕類型： 1：確定按鈕 2：取消按鈕 3：確定取消
btnType: String,
// 按鈕文本
sureText: {
type: String,
default: "確定"
},
cancleText: {
type: String,
default: "取消"
},
showModal: Boolean
}
添加完之后，還需重新改寫(xiě)代碼
<div class="modal" v-show="showModal">
<div class="mask"></div>
<div class="modal-dialog">
<div class="modal-header">
<span>{{title}}</span>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="icon-close" @click="$emit('cancle')"></a>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" v-if="btnType==1"@click="$emit('submit')"{{sureText}}</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" v-if="btnType==2"@click="$emit('cancle')">{{cancleText}}</a>
<div class="btn-group" v-if="btnType==3">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="$emit('submit')">{{sureText}}</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default" @click="$emit('submit')">{{cancleText}}</a>
</div>
</div>
</div>
</div>
通過(guò)父組件傳遞的參數(shù)，來(lái)實(shí)現(xiàn)代碼的重用，并且使用 $emit 來(lái)向外拋出自定義事件，然后在父組件實(shí)現(xiàn)自己的業(yè)務(wù)邏輯。
在 Home.vue 里面引入這個(gè)組件并調(diào)用
<modal title="小星星" sureText="確定" btnType="1" :showModal="showModal" @submit="go" @cancle="showModal=false" > <template v-slot:body> <p>給個(gè)小星星吧</p> </template> </modal>
這里的 @submit 和 @cancle 就是我們?cè)诮M件里面自定義的事件
最終效果如下
實(shí)現(xiàn)完之后，感覺(jué)有點(diǎn)彈出時(shí)生硬，沒(méi)關(guān)系，我們給它加點(diǎn)動(dòng)畫(huà)，在css3中有 transform 和 transition 可以實(shí)現(xiàn)動(dòng)畫(huà)效果，但是我們這里使用 vue 內(nèi)置組件 <transition> ，讓彈出框有一個(gè)從上面彈出的效果。
transition組件
transition 組件可以為元素或組件添加過(guò)渡效果，只會(huì)把過(guò)渡效果應(yīng)用到其包裹的內(nèi)容上，而不會(huì)額外渲染 DOM 元素，也不會(huì)出現(xiàn)在可被檢查的組件層級(jí)中。它可以通過(guò)多種方式進(jìn)行過(guò)渡，在這里應(yīng)用 class的方式過(guò)渡。
這幅圖是 Vue 官方給出的圖，簡(jiǎn)單來(lái)說(shuō)，v-enter是動(dòng)畫(huà)開(kāi)始的狀態(tài)，v-enter-active進(jìn)入過(guò)渡生效時(shí)的狀態(tài),v-enter-to是過(guò)渡的結(jié)束狀態(tài)，leave同理，具體細(xì)節(jié)大家可以去 https://cn.vuejs.org/v2/guide/transitions.html查看。
當(dāng)沒(méi)有指定的name屬性時(shí)，過(guò)渡的類名會(huì)默認(rèn)以v作為前綴，這里給transition指定name為
slide并用它包裹modal組件
<transition name="slide"> <div class="modal" v-show="showModal"> ... ... </div> </transition>
在style代碼里面modal后面加上
&.slide-enter-active {
top: 0;
}
&.slide-leave-active {
top: -100%;
}
&.slide-enter {
top: -100%;
}
并且給modal指定需要過(guò)渡的屬性
transition: top 0.5s;
加完這個(gè)之后，彈出框就會(huì)有一個(gè)滑上滑下的動(dòng)畫(huà)啦。
到此，我們的彈出框就完成啦。
你也可以根據(jù)自己的需求去做適當(dāng)?shù)恼{(diào)整，開(kāi)發(fā)出適合自己項(xiàng)目的彈出框。
最后
在實(shí)際開(kāi)發(fā)中，組件化是尤為重要的，它能夠幫助我們寫(xiě)出更高質(zhì)量的代碼，也能夠讓我們的代碼更易于維護(hù)，盡早的樹(shù)立組件化的思想，對(duì)寫(xiě)代碼也是非常有幫助的。
附上https://github.com/anpeier/shop-online
到此這篇關(guān)于Vue組件化開(kāi)發(fā)之通用型彈出框的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 彈出框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
mapActions 就是將組件中的函數(shù)映射為對(duì)應(yīng)的action，通過(guò)本文我們了解了mapActions 大概是用來(lái)干什么的，接下來(lái)介紹一下 mapActions 的具體用法，感興趣的朋友一起看看吧2023-09-09
這篇文章主要介紹了vue通過(guò)cookie獲取用戶登錄信息的思路詳解，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
vue業(yè)務(wù)實(shí)例之組件遞歸及其應(yīng)用
目中出現(xiàn)多級(jí)菜單時(shí),需要多層for循環(huán)時(shí),但是當(dāng)菜單增加層級(jí)時(shí),需要在頁(yè)面結(jié)構(gòu)中增加一層for循環(huán),這時(shí)我們可以使用組件遞歸的思想來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue業(yè)務(wù)實(shí)例之組件遞歸及其應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Element Breadcrumb 面包屑的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
詳解elementUI中input框無(wú)法輸入的問(wèn)題
這篇文章主要介紹了詳解elementUI中input框無(wú)法輸入的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vant遇到van-sidebar數(shù)據(jù)超出不能滑動(dòng)的問(wèn)題
這篇文章主要介紹了vant遇到van-sidebar數(shù)據(jù)超出不能滑動(dòng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-router中scrollBehavior的巧妙用法
本文給大家介紹vue-router中scrollBehavior的妙用,文中給大家提到了兩種解決方案，需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格合并功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
本文主要介紹了Vite熱更新失效的問(wèn)題解決,原因是文件夾和文件名大小寫(xiě)不一致,下面就來(lái)解決一下次問(wèn)題,感興趣的可以了解一下2024-08-08
Vue Form表單的使用方法(rules格式校驗(yàn)網(wǎng)絡(luò)校驗(yàn)鍵盤(pán)按鍵監(jiān)聽(tīng))
本文介紹了在Vue.js中使用表單校驗(yàn)規(guī)則（rules）進(jìn)行網(wǎng)絡(luò)請(qǐng)求校驗(yàn)的方法,以及如何通過(guò)formRef引用表單對(duì)象并進(jìn)行鍵盤(pán)按鍵監(jiān)聽(tīng),感興趣的朋友跟隨小編一起看看吧2024-11-11