vue組件實現彈出框點擊顯示隱藏效果

更新時間：2020年10月26日 10:13:03 作者：cdx1170776994

這篇文章主要為大家詳細介紹了vue組件實現彈出框點擊顯示隱藏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現彈出框點擊顯示隱藏的具體代碼，供大家參考，具體內容如下

效果如下圖

由于我的更改密碼彈出框是一個組件引用的，所以在一開始是隱藏的，這就需要在當前的頁面上對彈出框組件設置v-show,但是在彈出框顯示出來的時候，操作執(zhí)行完后當前頁面的更改按鈕已經被彈出框覆蓋了。所以只能在彈出頁面點擊取消實現關閉隱藏彈出框。這樣就需要寫兩個點擊事件，但是兩個點擊事件就會有沖突，需要點擊兩下才能使彈出框顯示和隱藏。然后我就用的以下方法，希望可以幫到大家?。?！

代碼如下

1.在當前頁面中（主頁面）

<template>
 ......
 <ul>
 <li><span @click="ModifyPassword()">更改密碼</span></li> //點擊事件
 </ul>
 ......
 //組件傳一個點擊事件@hidden="hiddenShow"，而這個點擊事件就是下面的hiddenShow（）函數
 <ModifyPassword @hidden="hiddenShow" v-show="ModifyPassword_pop_up"> </ModifyPassword> //調用組件
</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
 },
 //更改密碼彈出框隱藏（傳給組件一個點擊事件）
 hiddenShow(){
 let that = this;
 that.ModifyPassword_pop_up = false
 }
 }
 }
</script>

2.在彈出框組件頁面中（更改密碼）

<template>
 ......
 <div class="foot">
  <input type="button" name="OK" value="提交" class="yes" >
  //在取消按鈕這里調用點擊事件
  <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組件。但是讓內容比較多比較復雜的時候，還是需要自己寫一個的。本案主要是運用了$emit監(jiān)聽，組件傳事件。如果有更好的方案歡迎大家一起交流。

關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: