改寫標題：根據螢幕寬度發出 Vue.js 事件

Question

我從側邊欄中獲得了以下程式碼。當我單擊任何連結時，我也會向根元件發出事件，然後呼叫一個函數來隱藏側邊欄。這運行良好，但現在我希望僅當螢幕寬度小於 768px 時才發出事件，以便僅當我想要調用該函數時才能發出事件。

<div class="side-links">
      <ul>
        <li>
          <router-link @click="$emit('navLinkClicked')" :to="{ name: 'Home' }"
            >Home</router-link
          >
        </li>
        <li>
          <router-link @click="$emit('navLinkClicked')" :to="{ name: 'Blog' }"
            >Blog</router-link
          >
        </li>

        <li>
          <router-link @click="$emit('navLinkClicked')" :to="{ name: 'About' }"
            >About</router-link
          >
        </li>
      </ul>
    </div>

Answer 1

您可以使用window.innerWidth來檢查目前視窗的寬度。然而，全域範圍變數在範本中不可用，因為它的範圍僅限於您的元件。您可以建立一個處理程序方法：

sssccc

或建立一個計算變數來定義寬度是否低於閾值：

sssccc

就我個人而言，我會選擇第一個選項，因此您只需檢查一次。

在 Vue 2 中，也建議使用 kebab-case事件名稱。