您好,登錄后才能下訂單哦!
這篇“vue組件怎么實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“vue組件怎么實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果”文章吧。
效果如下圖
由于我的更改密碼彈出框是一個(gè)組件引用的,所以在一開始是隱藏的,這就需要在當(dāng)前的頁面上對(duì)彈出框組件設(shè)置v-show,但是在彈出框顯示出來的時(shí)候,操作執(zhí)行完后當(dāng)前頁面的更改按鈕已經(jīng)被彈出框覆蓋了。所以只能在彈出頁面點(diǎn)擊取消實(shí)現(xiàn)關(guān)閉隱藏彈出框。這樣就需要寫兩個(gè)點(diǎn)擊事件,但是兩個(gè)點(diǎn)擊事件就會(huì)有沖突,需要點(diǎn)擊兩下才能使彈出框顯示和隱藏。然后我就用的以下方法,希望可以幫到大家?。?!
代碼如下
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>
以上就是關(guān)于“vue組件怎么實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。