Mari kita bincangkan tentang masalah mengklik pada ruang kosong dalam uniapp tanpa kehilangan fokus

Dengan pembangunan berterusan terminal mudah alih dan web, senario penggunaan pembangun menjadi semakin pelbagai, dan mereka juga sentiasa mencari alatan dan rangka kerja pembangunan yang lebih cekap Uniapp ialah susunan penuh yang menyepadukan alat pembangunan berbilang platform , memainkan peranan yang besar dalam bidang pembangunan merentas platform. Semasa pembangunan, kami sering menghadapi beberapa masalah kecil Contohnya, dalam pembangunan uniapp, kami sering menghadapi masalah mengklik pada ruang kosong tanpa kehilangan fokus Artikel ini akan memperkenalkan cara menyelesaikan masalah ini.

UniApp ialah rangka kerja pembangunan merentas platform berdasarkan rangka kerja Vue.js Ia dibangunkan oleh pasukan pembangunan bebas yang dilaburkan oleh DCloud (J. Lin Ia boleh menyusun satu set kod ke dalam H5, iOS). , Android, dsb. Borang permohonan yang berbeza seperti program kecil, apl dan H5 untuk berbilang platform tidak perlu ditulis semula dan disesuaikan.

Dalam uniapp, kami biasanya menggunakan input untuk mendapatkan input pengguna, tetapi secara lalai, apabila kami mengklik pada kawasan di luar input, input akan hilang fokus. Perlu diingat bahawa peristiwa klik pada masa ini tidak boleh terikat secara langsung dengan elemen di luar input Anda perlu menggunakan pengubah suai acara @click.stop dalam vue untuk mengelakkan acara daripada menggelegak.

Sebagai contoh, kod berikut ialah contoh mudah cara mengklik pada ruang kosong tanpa kehilangan fokus:

<template>
  <div class="container">
    <input type="text" v-model="inputText" @blur="hideKeyboard" />
    <div class="content" @click.stop="hideKeyboard">点击空白区域</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        inputText: '',
      };
    },
    methods: {
      hideKeyboard() {
        //模拟失去焦点操作
        document.activeElement.blur();
      },
    },
  };
</script>

Dalam kod di atas, @click.stop digunakan untuk menghalang acara daripada menggelegak ini menghalang input daripada kehilangan fokus apabila mengklik pada ruang kosong.

Perlu diambil perhatian bahawa kami perlu mensimulasikan peristiwa tidak fokus dalam kaedah hideKeyboard Ini kerana dalam uniapp, kami menggunakan pengikatan data dua hala vue untuk mengemas kini nilai kotak input. yang dicetuskan apabila peristiwa kabur Bila, peristiwa kemas kini:xxx sebenarnya dicetuskan terlebih dahulu untuk mengemas kini data, dan kemudian peristiwa kabur dicetuskan, jadi kita perlu mensimulasikan peristiwa tidak fokus secara manual untuk mencapai matlamat.

Di atas ialah cara menggunakan uniapp untuk mengklik pada ruang kosong tanpa kehilangan fokus. Pada masa yang sama, kita juga boleh kehilangan tumpuan apabila mengklik di tempat lain dengan mendengar peristiwa sentuhan pada keseluruhan halaman. Kod berikut menunjukkan cara menggunakan peristiwa sentuh untuk mencapai fungsi ini:

<template>
  <div class="container" @touchstart="handlePageTouchStart">
    <input type="text" v-model="inputText" @blur="hideKeyboard" />
    <div class="content" @click.stop="hideKeyboard">点击空白区域</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        inputText: '',
      };
    },
    methods: {
      hideKeyboard() {
        //与之前方法相同，不再赘述
      },
      handlePageTouchStart(e) {
        if (document.activeElement.tagName == 'INPUT') {
          e.preventDefault();
          document.activeElement.blur();
        }
      },
    },
  };
</script>

Dalam kod di atas, kami mengikat acara mula sentuh pada keseluruhan halaman, dan kemudian menentukan sama ada elemen yang mencetuskan pada masa ini. acara ialah Elemen input, jika ya, kehilangan fokus yang sepadan secara manual.

Ringkasan

Dalam uniapp, adalah keperluan biasa untuk mengklik pada ruang kosong tanpa kehilangan fokus. Kami boleh menyelesaikan masalah ini dengan mudah dengan menggunakan @click.stop dan mendengar acara sentuhan. Pada masa yang sama, dalam pembangunan sebenar, kita perlu memilih berdasarkan situasi sebenar, penyelesaian mana yang akan digunakan untuk mencapai fungsi mengklik pada ruang kosong tanpa kehilangan fokus, untuk mencapai pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Mari kita bincangkan tentang masalah mengklik pada ruang kosong dalam uniapp tanpa kehilangan fokus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!