您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“怎么用vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
代碼如下
1.在當(dāng)前頁面中(主頁面)
<template> ...... <ul> <li><span @click="ModifyPassword()">更改密碼</span></li> //點(diǎn)擊事件 </ul> ...... //組件傳一個(gè)點(diǎn)擊事件@hidden="hiddenShow",而這個(gè)點(diǎn)擊事件就是下面的hiddenShow()函數(shù) <ModifyPassword @hidden="hiddenShow" v-show="ModifyPassword_pop_up"> </ModifyPassword> //調(diào)用組件 </template> <script> import ModifyPassword from '@/components/pop-up/ModifyPassword.vue //引入組件 export default { data(){ return{ date:'', ModifyPassword_pop_up:false, history_pop_up:false } }, components:{ ModifyPassword //引用組件 }, methods:{ //更改密碼彈出框顯示(組件引用的彈出框) ModifyPassword(){ this.ModifyPassword_pop_up=true }, //更改密碼彈出框隱藏(傳給組件一個(gè)點(diǎn)擊事件) hiddenShow(){ let that = this; that.ModifyPassword_pop_up = false } } } </script>
2.在彈出框組件頁面中(更改密碼)
<template> ...... <div class="foot"> <input type="button" name="OK" value="提交" class="yes" > //在取消按鈕這里調(diào)用點(diǎn)擊事件 <input type="button" name="cancel" value="取消" class="no" @click="Hidden()"> </div> ...... </ModifyPassword> </template> <script> export default { data(){ return{} }, methods:{ //本更改密碼彈出框的顯示隱藏事件 Hidden(){ //通過$emit引用組件傳過來的hidden()事件 this.$emit('hidden') } } } </script>
雖然Vue 有很多UI組件。但是讓內(nèi)容比較多比較復(fù)雜的時(shí)候,還是需要自己寫一個(gè)的。本案主要是運(yùn)用了$emit監(jiān)聽,組件傳事件。
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
“怎么用vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。