제목 다시 작성: 화면 너비에 따라 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를 사용하여 현재 뷰포트의 너비를 확인할 수 있습니다. 그러나 전역 범위 변수는 해당 범위가 구성 요소로 제한되므로 템플릿에서 사용할 수 없습니다. 핸들러 메소드를 생성할 수 있습니다:

으아아아

또는 너비가 임계값보다 작은지 정의하는 계산된 변수를 만듭니다.

으아아아

개인적으로는 첫 번째 옵션을 선택하므로 한 번만 확인하시면 됩니다.

Vue 2에서는 kebab-case 이벤트 이름을 사용하는 것도 권장됩니다.