如果輸入改變焦點的寬度，Vue @click 事件將不起作用

Question

我有這部分組件：

  <div id="container">
    <span id="magnify">🔍</span>
    <input id="search" />
    <span id="user">👤</span>
    <span
      @click="dialog = true"
      id="buttonMenuHamburger">Ⓜ️</span>
  </div>

  <transition name="fade">
    <div
      id="menuOverlay"
      v-if="dialog"
      >
      <div
        class="fondOverlay"
        @click="dialog = false">
      </div>
      <ul class="contenuMenuOverlay">
        <li>
          <router-link to="/home">
            ➕ Home
          </router-link>
        </li>
      </ul>
    </div>
  </transition>


<script>
import {
  ref,
} from 'vue';
import { useRouter } from 'vue-router';

export default {
  name: 'SearchBar',
  setup() {
    const router = useRouter();
    const dialog = ref(false);

    router.beforeEach((to, from, next) => {
      dialog.value = false;
      next();
    });

    return {
      dialog,
    };
  },
};

</script>


<style scoped>
a {
  color: black;
}

#menuOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#menuOverlay .fondOverlay {
  background-color: rgba(10, 10, 10, 0.5);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 99;
}

#menuOverlay .contenuMenuOverlay {
  padding: 20px;
  margin: 20px;
  border: 2px solid white;
  text-align: left;
  font-size: 2em;
  font-variant: small-caps;
  border: 2px solid white;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 100;
}

ul {
  list-style-type: none;
  font-family: "Champagne & Limousines";
  font-variant: small-caps;
}

#container {
  margin-bottom: 10px;
}

#container span {
  padding-top: 7px;
  cursor: pointer;
  position: absolute;
}

#magnify {
  padding-left: 5px;
  min-width: 30px;
}

#user {
  margin-left: -60px;
}

#buttonMenuHamburger {
  margin-left: -30px;
}

#search {
  background: transparent;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 24px;
  padding: 0 80px;
  height: 30px;
  width: 25%;
  border: 2px solid white;
  border-radius: 30px;
  font-family: 'Caviar Dream';
  transition: width 0.2s;
  outline: none;
}

#search:focus {
  width: 50%;
}

#search:before { content: 'Some'; }

</style>

當我單擊Ⓜ️時， dialog值正確更改。 但是如果我把焦點放在輸入上，當我點擊Ⓜ️時，它就會失去對輸入的焦點。 我必須再次單擊Ⓜ️才能將dialog值設置為 true。

有什么我想念的嗎？ 提前致謝。

編輯：它似乎來自寬度變化......

Answer 1

我可能誤解了你的問題，但我無法復制這個問題。

 const { watchEffect, ref, onMounted, nextTick } = Vue; Vue.createApp({ setup() { const dialog = ref(false); const input = ref(null); // log when `dialog` is changed watchEffect(() => console.log(dialog.value)); // focus on `input` from the beginning onMounted(() => nextTick(() => input.value.focus())); return { dialog, input }; }, }).mount('#app');

 <script src="https://unpkg.com/vue@3.0.7/dist/vue.global.js"></script> <div id="app"> <span id="magnify"></span> <input id="search" ref="input" /> <span id="user"></span> <transition name="fade"> <span @click="dialog = true" id="buttonMenuHamburger">Ⓜ️</span> </transition> </div>