Question

我做了一个模态框（窗口）。单击导航栏下拉菜单中的按钮（搜索）时，它将打开一个模式框。但是，当我将鼠标移出浏览器或窗口时（例如，当我转到浏览器的地址栏时），模式框会隐藏（关闭），并且当我再次将鼠标移到下拉菜单上时，它会自动显示（因为在此之前我还没有关闭它）。我有可能停止这种行为吗？我在前端使用VueJS。

App.vue：

<li id="dropdown-menu2" class="none"><a href="">Search</a>
  <ul>
    <li class="none"><router-link to="/Table1">List1</router-link></li>
    <li class="none"><router-link to="/Table2">List2</router-link></li>
    <li class="none"><router-link to="/Table3">List3</router-link></li>
    <tableModal v-if="showModal" @close="showModal = false"></tableModal>
    <button @click="showModal = true;" style="width: 100%; height: 30px;">Short search</button>
  </ul>
</li>

tableModal.vue：

<template>
  <transition name="tableModal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-header">
            <slot name="header">
              Short search for number
            </slot>
            <button class="modal-close" @click="$emit('close')">
              X
            </button>
          </div>

          <div class="modal-body">
            <slot name="body">
              <input type="text">
            </slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              &nbsp
              <button class="modal-default-button" @click="search();$emit('close');">
                Search
              </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import config from '../main.js'

  export default {

    data(){
      return {

      }
    },

    methods: {

      search(){
        config.router.push('/tableDataShort');
      }

    }

  }
</script>

鼠标移出窗口后，模态框隐藏

0 个答案: