vue彈窗組件的樣子
創(chuàng)新互聯(lián)公司長期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為盤州企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè),盤州網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
我們先看一下,我們要實(shí)現(xiàn)出來的彈窗組件長什么樣子:
吶,我們要用vue組件實(shí)現(xiàn)的彈窗就是這個樣子,跟我們用js插件實(shí)現(xiàn)的效果一樣,下面我們開始講述怎么實(shí)現(xiàn)一個通用的vue彈窗組件。
實(shí)現(xiàn)vue彈窗組件需要的知識
是vue組件,當(dāng)然最基礎(chǔ)的是vue的知識,我假設(shè)大家是有一定vue功底的,然后你還需要了解:
1、vue的事件系統(tǒng),vue組件間的單項(xiàng)數(shù)據(jù)流,props從父組件向子組件傳遞數(shù)據(jù),子組件通過事件emit向父組件傳遞事件,父組件通過on監(jiān)聽子組件的事件來處理具體事務(wù)。
2、具名插槽slot,通過name屬性來接收不同的父組件傳遞過來的內(nèi)容,具名插槽接收兩個數(shù)據(jù),一是彈窗的標(biāo)題,二是彈窗的顯示內(nèi)容。
vue彈窗組件的實(shí)現(xiàn)代碼
vue彈窗的具體實(shí)現(xiàn)代碼采用單頁面組件的形式寫的,具體代碼如下:
<template> <div class='md-cont' v-show='showstate'> <div class='md-wrapper' > <div class='md-title'> <slot name='tlt' > 標(biāo)題 </slot> </div> <div class='md-text'> <slot name='text' > 這里是彈框內(nèi)容 </slot> </div> <div class='footer'> <div v-if='type=="confirm"' @click='tocancel' class='md-btn'>取消</div> <div class='md-btn' @click='took'>確定</div> </div> </div> </div> </template> <script> export default{ name:'modal', props:['type','showstate'], methods:{ tocancel:function(){ this.$emit('tocancel'); }, took:function(){ this.$emit('took'); } } } </script> <style scoped> .md-cont{position:fixed;left:0;right: 0;top:0;bottom: 0; z-index: 500;background:rgba(0,0,0,0.3);text-align:center; overflow: hidden;white-space:nowrap;} .md-cont:after{content:"";display:inline-block;width:0; height:100%;visibility: hidden;vertical-align:middle;} .md-wrapper{display:inline-block;vertical-align:middle; background:#fff;color:#333333;font-size:0.34rem; padding-top:0.2rem;border-radius: 0.1rem;max-width:100%;} .md-title{font-size:0.34rem;text-align:center;line-height:0.6rem;} .md-text{font-size:0.25rem;text-align:center;line-height:0.4rem;padding:0.2rem 0.5rem;} .footer{display:flex;border-top:0.01rem solid #E5E5E5; line-height:0.88rem;color:#488BF1;font-size:0.32rem;} .md-btn{flex:1;} .md-btn +.md-btn{border-left:0.01rem solid #E5E5E5;} </style>
組件中模版代碼很簡單,其中主要的就是兩個具名插槽slot;兩個按鈕觸發(fā)兩個事件,這兩個事件通過$emit上傳到父組件。根據(jù)父組件傳遞過來的type屬性來決定是否顯示取消按鈕。
對于具名插槽和$emit事件系統(tǒng)不理解的可以去vue官網(wǎng)查看,這里不多做贅述了。
vue彈窗組件的使用
在父組件里面使用彈窗組件也是很方便的,如果你是bootstrap的使用者或者愛好者,你會對這種使用方式感到熟悉和親切。
下面我展示使用代碼:
<template> <div> <div class='aft-box'> <div class='aft-flex aft-pd'> <div class='aft-btn' @click='alerts'>alert</div> </div> <div class='aft-flex aft-pd'> <div class='aft-btn aft-blue' @click='confirms'>confirm</div> </div> </div> <Modal type='alert' @took='okfall' :showstate='showa'> <span slot='tlt'>提示</span> <div slot='text'>我是一個alert提示彈窗</div> </Modal> <Modal type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'> <span slot='tlt'>確認(rèn)</span> <div slot='text'>{{msg}}</div> </Modal> </div> </template> <script> import Modal from './modal' export default{ name:'container', components:{ Modal }, data(){ return { showa:false, showc:false, msg:"我有兩個按鈕,是confirm確認(rèn)彈窗" } }, methods:{ alerts(){ this.showa=true; }, confirms(){ this.showc=true; this.msg="我有兩個按鈕,是confirm確認(rèn)彈窗"; }, okfall(){ this.showa=false; }, okfall2(){ this.msg="點(diǎn)擊了確認(rèn)按鈕,2秒后彈窗關(guān)閉"; setTimeout(()=>{ this.showc=false; },2000); }, cancelfall(){ this.showc=false; } } } </script> <style> .aft-box{display:flex;line-height:0.65rem;font-size:0.26rem;color:#333;padding:0.5rem 0;} .aft-flex{flex:1;} .aft-pd{padding:0.5rem 0.1rem;} .aft-btn{display:block;line-height:0.88rem;text-align:Center; color:#fff;border-radius: 0.12rem;background:#FFB63B ;} .aft-blue{background:#488BF1;} </style>
這里我們需要先通過import引入modal彈窗組件,再在父組件里面通過components屬性聲明使用此組件。
然后在template模版中通過Modal標(biāo)簽使用彈窗組件;
在彈窗組件上通過type來設(shè)置彈窗的特性;
通過:showstate屬性來標(biāo)識彈窗的打開和關(guān)閉;
通過@took來設(shè)置確定按鈕點(diǎn)擊后的操作;
通過@tocancel來確定取消按鈕點(diǎn)擊后的操作;
在Modal標(biāo)簽中通過內(nèi)容上的slot屬性來標(biāo)識內(nèi)容是標(biāo)題還是顯示內(nèi)容,slot='tlt'中的文字將會作為彈窗標(biāo)題顯示,slot='text'的文字將會作為彈窗的正文顯示;
在這里你也可以通過{{msg}}插值表達(dá)式的形式來把內(nèi)容和父組件的數(shù)據(jù)綁定到一塊;
在script中我們通過data中的兩個變量showa和showb來標(biāo)識彈框的打開和關(guān)閉;
頁面中的按鈕事件中通過設(shè)置showa和showb的值來打開和關(guān)閉彈窗。
vue彈窗組件結(jié)語
這樣一個vue彈窗組件就算完成了,使用簡單靈活,哪里需要引入到里面就可以使用了,而且其中的內(nèi)容和標(biāo)題可以自由設(shè)置,而且vue彈窗組件相對于js彈窗插件來說實(shí)現(xiàn)起來更簡單,更清晰。只是我們需要很好的掌握vue提供的特性以及能夠按照vue所在的思想框架進(jìn)行思考。而vue開中的重要思想就是:我們操作數(shù)據(jù),頁面變化dom操作交給vue來處理。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)頁標(biāo)題:vue彈窗組件的實(shí)現(xiàn)示例代碼
文章起源:http://bm7419.com/article30/jdidso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、、企業(yè)建站、定制網(wǎng)站、網(wǎng)站導(dǎo)航、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)