如代碼所示，我想獲得一個點擊事件來觸發作為組件的彈出視窗“add-day-form”。但是通過將 放在@click="showModal = true"包裝 div 中，當彈出視窗出現時，我似乎無法按下發出關閉事件的關閉按鈕。如果我把它@click="showModal = true"放在font-awesome-icon. 組件在這兩種情況下都出現，但 close 事件似乎只在它不在外部 div (plusContainer) 中時才起作用，這是我想要的
*編輯：似乎如果我dblclick在 plusContainer 上監聽事件，一切似乎都正常，除了現在我必須雙擊打開不理想的組件
我從他們的網站上復制了 vue 彈出模式https://vuejs.org/v2/examples/modal.html
這是 app.vue
<template>
<div class="plusContainer" @click="showModal = true">
<font-awesome-icon style="color: white" class="fa-sm" icon="plus" />
<add-day-form v-if="showModal" @close="showModal = false" />
</div>
</template>
<script>
import addDayForm from "./addDayForm.vue";
import dayView from "./dayView.vue";
export default {
components: {
addDayForm,
dayView,
},
data() {
return {
showModal: false,
};
},
};
</script>
這是表單組件
<template>
<div class="notifContainer">
<div class="heading">
<h2 id="title">Dayy</h2>
</div>
<button @click="$emit('close')">Close</button>
<!-- <day-view></day-view> -->
</div>
</template>
<script>
export default {};
</script>
uj5u.com熱心網友回復：
看起來點擊事件正在傳播到plusContainer所以它關閉然后立即再次打開。
您可以嘗試在表單組件上執行以下操作：@click.stop="$emit('close')"：
<template>
<div class="notifContainer">
<div class="heading">
<h2 id="title">Dayy</h2>
</div>
<button @click.stop="$emit('close')">Close</button>
<!-- <day-view></day-view> -->
</div>
</template>
<script>
export default {};
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/398218.html