Vue menentukan sama ada terdapat fungsi sentuh

Sekarang semakin banyak peranti mempunyai fungsi sentuh dan bagi pembangun, mereka perlu mengendalikan peranti yang berbeza secara berbeza dalam projek mereka. Apabila menggunakan rangka kerja vue.js untuk membangunkan aplikasi mudah alih, bagaimana untuk menentukan sama ada peranti itu mempunyai fungsi sentuhan?

Kaedah 1: Tentukan melalui penyemak imbas

Dalam penyemak imbas, anda boleh menggunakan kod berikut untuk menentukan sama ada peranti menyokong fungsi sentuh:

if ('ontouchstart' in document.documentElement) {
  // 支持触控
} else {
  // 不支持触控
}

Prinsip kod ini adalah untuk menentukan Sama ada elemen akar dokumen menyokong acara ontouchstart Jika ia berlaku, ini bermakna peranti mempunyai keupayaan sentuhan. Kaedah penghakiman ini mudah dan berkesan, tetapi ia hanya terpakai pada penyemak imbas dan tidak boleh digunakan secara langsung dalam rangka kerja vue.js.

Kaedah 2: Tentukan melalui peranti mudah alih

Peranti mudah alih selalunya mempunyai fungsi sentuhan, jadi anda boleh menilai dengan kod berikut:

if ('ontouchstart' in window || navigator.maxTouchPoints) {
  // 支持触控
} else {
  // 不支持触控
}

Prinsip kod ini adalah untuk tentukan sama ada atribut window atau ontouchstart wujud dalam objek global navigator.maxTouchPoints Jika wujud, ini bermakna peranti mempunyai fungsi sentuh. Kaedah penghakiman ini sangat mudah digunakan dan boleh digunakan terus dalam rangka kerja vue.js.

Kaedah 3: Melalui arahan sambungan Vue.directive

Kita boleh menggunakan arahan sambungan Vue.directive untuk menyesuaikan arahan v-touch untuk menentukan sama ada peranti menyokong fungsi sentuh. Pelaksanaan khusus adalah seperti berikut:

Vue.directive('touch', {
  bind: function (el, binding) {
    if ('ontouchstart' in window || navigator.maxTouchPoints) {
      el.classList.add(binding.value);
    }
  }
});

Apabila menggunakannya, kita boleh menghantar nama kelas yang perlu ditambah ke dalam parameter arahan, seperti berikut:

<button v-touch="btn-has-touch">Click me!</button>

Kod ini akan digunakan apabila peranti menyokong fungsi sentuh Tambahkan nama kelas btn-has-touch pada butang supaya kami boleh melakukan pemprosesan yang sepadan dalam gaya.

Ringkasan

Dengan kaedah di atas, kita boleh dengan lebih mudah menentukan sama ada peranti mempunyai fungsi sentuh. Pada masa yang sama, kami juga boleh menggunakan arahan seperti v-touch untuk mengendalikan acara sentuhan dengan lebih mudah dalam vue.js. Dalam pembangunan sebenar, kaedah pertimbangan yang berbeza boleh dipilih dan digunakan mengikut keperluan projek dan kumpulan pengguna sasaran.

Atas ialah kandungan terperinci Vue menentukan sama ada terdapat fungsi sentuh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!