时间戳

首页 > 解决方案 > 在外部单击时尝试隐藏模型具有不同的效果

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

问题描述

我有一个 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>

标签： javascriptvue.js

解决方案

问题可能是您通过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 商店。

推荐阅读