Tulis semula tajuk: Pancarkan peristiwa Vue.js berdasarkan lebar skrin

Question

Saya mendapat kod berikut daripada bar sisi. Apabila mana-mana pautan diklik, saya juga memancarkan acara ke komponen akar dan kemudian memanggil fungsi untuk menyembunyikan bar sisi. Ini berfungsi dengan baik, tetapi sekarang saya mahu acara dipancarkan hanya apabila lebar skrin kurang daripada 768px supaya acara hanya boleh dipancarkan apabila saya mahu fungsi dipanggil.

<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

Anda boleh menggunakan window.innerWidth untuk menyemak lebar port pandangan semasa. Walau bagaimanapun, pembolehubah skop global tidak tersedia dalam templat kerana skopnya terhad kepada komponen anda. Anda boleh membuat kaedah pengendali:

sssccc

Atau buat pembolehubah yang dikira untuk menentukan sama ada lebar di bawah ambang:

sssccc

Secara peribadi saya akan memilih pilihan pertama supaya anda hanya perlu menyemaknya sekali.

Dalam Vue 2, ia juga disyorkan untuk menggunakan nama acara kebab-case.