在外面单击时尝试隐藏模型具有不同的效果

Question

>我有一个 vue 模态组件，我根据布尔变量使其可见/不可见，我还想在用户单击模态外部时隐藏模态，我通过附加一个单击侦听器并检查每次单击以查看它是外部还是内部来做到这一点，但是我的方法一定有问题，因为模态在我单击按钮后立即自动关闭以使其可见。

这是我的组件：

<template>
<transition name="cart-tab">
<div class="ADMINsearch_maincontainer" v-show="filtersVisible" id="admin-search">
</div>
</transition>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';
export default {
name: 'LAYOUTsearch',

computed:
{
...mapState('AdminPanel',['filtersVisible', 'panelSchema', 'theme', 'searchSchema']),
},

data(){
return {
specifiedElement:null
}
},

mounted()
{
console.log(this.$options.name+' component successfully mounted');
this.addListener();
},

methods:
{

addListener()
{
this.specifiedElement = document.getElementById('admin-search')
const self = this;
document.addEventListener('click', function(event) 
{
var isClickInside = self.specifiedElement.contains(event.target);
if (!isClickInside) 
{
//outside
self.setFiltersVisible(false)
}
else 
{
//inside
}
});
},

}

};
</script>
<!--STYLES-->
<style scoped>
.container_style{width:100% !important;}
.ADMINsearch_maincontainer{width:33%; height:100vh; z-index:9999999999999999; background-color:white; box-shadow:-3px -3px 6px 6px rgba(0,0,0,0.3); position:fixed; top:0px; right:0px; display:flex; flex-direction:column;}
}
</style>

Answer 1

问题可能是您正在获取变量的值filtersVisiblemapState，然后您正在尝试使用组件实例中的方法更新其值。

假设具有此配置的商店：

const state = {
filtersVisible: false
}
const mutations = {
setFiltersVisibleValue(state, visible) {
state.filtersVisible = visible
}
}
export default {
state,
mutations,
}

在组件中，您可以通过以下方式设置和获取filtersVisible变量的状态：

<template>
<transition name="cart-tab">
<div
class="ADMINsearch_maincontainer"
v-show="filtersVisible"
id="admin-search"
></div>
</transition>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapMutations } from "vuex";
export default {
name: "LAYOUTsearch",
computed: {
...mapState(["filtersVisible"])
},
data() {
return {
specifiedElement: null
};
},
mounted() {
console.log(this.$options.name + " component successfully mounted");
this.addListener();
},
methods: {
...mapMutations(["setFiltersVisibleValue"]),
addListener() {
this.specifiedElement = document.getElementById("admin-search");
document.addEventListener("click", function(event) {
var isClickInside = self.specifiedElement.contains(event.target);
if (!isClickInside) {
//outside - call the mutation to update properly the value of the filtersVisible variable in the store
this.setFiltersVisibleValue(false);
} else {
//inside
}
});
}
}
};
</script>
<!--STYLES-->
<style scoped>
.container_style{width:100% !important;}
.ADMINsearch_maincontainer{width:33%; height:100vh; z-index:9999999999999999; background-color:white; box-shadow:-3px -3px 6px 6px rgba(0,0,0,0.3); position:fixed; top:0px; right:0px; display:flex; flex-direction:column;}
}
</style>

• 该示例仅使用变量filtersVisible进行解释。我假设一个不使用模块的 Vuex 商店。