Kursor tidak hilang apabila anda mengklik di tempat lain pada halaman vue

Apabila menggunakan Vue untuk membangunkan halaman, selalunya ditemui kursor dalam kotak input tidak hilang apabila mengklik di tempat lain pada halaman. Masalah ini kelihatan mudah, tetapi jika tidak ada cara yang betul untuk menanganinya, ia boleh menjejaskan pengalaman interaktif pengguna. Artikel ini akan memberikan beberapa penyelesaian kepada masalah ini.

Analisis Masalah

Apabila kita mengikat atribut model v bagi kotak input dalam komponen Vue, apabila pengguna memasukkan dalam kotak input, kursor akan mengikuti dalam kotak input Input pengguna bergerak. Tetapi apabila pengguna mengklik pada kawasan lain pada halaman, kursor tidak akan hilang, yang akan menyebabkan pengalaman pengendalian yang lebih menyusahkan.

Punca masalah ini ialah kami tidak mengendalikan peristiwa yang dicetuskan apabila pengguna mengklik pada kawasan kotak bukan input. Biasanya, apabila mengklik pada kawasan lain, kita perlu mencetuskan peristiwa kabur kotak input secara manual supaya kotak teks kehilangan fokus dan kursor dihapuskan.

Penyelesaian

Pilihan 1: Gunakan v-on:blur untuk mengikat peristiwa kabur dalam komponen Vue

Gunakan arahan v-on dalam komponen Vue untuk mengikat dengan mudah acara kabur Tentukan acara DOM. Kita boleh mengikat peristiwa kabur ke kotak input Apabila pengguna mengklik pada kawasan lain, peristiwa itu dicetuskan dan kotak input kehilangan fokus, sekali gus menghapuskan kursor.

Kod sampel:

<template>
  <div>
    <input v-model="inputValue" v-on:blur="inputBlur">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ""
    };
  },
  methods: {
    inputBlur() {
      this.$refs.input.blur();
    }
  }
};
</script>

Dalam kod sampel di atas, kami mengikat acara kabur pada kotak input dan memanggil kaedah kabur kotak input dalam pengendali acara.

Pilihan 2: Gunakan arahan Vue untuk menyesuaikan gelagat elemen

Arahan Vue (Arahan) boleh membantu kami menyesuaikan gelagat elemen HTML. Berdasarkan ini, kita boleh menyesuaikan arahan v-blur dalam komponen Vue Apabila pengguna mengklik pada kawasan selain kotak input, arahan itu dicetuskan dan kotak input kehilangan fokus, dengan itu menghapuskan kursor.

Kod sampel:

<template>
  <div>
    <input v-model="inputValue" v-blur>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ""
    };
  },
  directives: {
    blur: {
      bind: function(el, binding, vnode) {
        function documentHandler(e) {
          if (el.contains(e.target)) {
            return false;
          }
          el.blur();
        }
        el.__vueBlur__ = documentHandler;
        document.addEventListener("click", documentHandler);
      },
      unbind: function(el, binding) {
        document.removeEventListener("click", el.__vueBlur__);
        delete el.__vueBlur__;
      }
    }
  }
};
</script>

Dalam kod sampel di atas, kami mentakrifkan arahan kabur dan mengikat fungsi documentHandler() kepadanya. Dalam fungsi tersebut, kami mendengar peristiwa klik dokumen Apabila pengguna mengklik pada kawasan kotak bukan input, peristiwa itu dicetuskan dan kaedah kabur kotak input dipanggil.

Ringkasan

Sama ada kami menggunakan pilihan satu atau pilihan dua, kami perlu mengikat acara atau arahan yang sepadan dengan kotak input dan memanggil kaedah kabur kotak input dalam fungsi pengendalian acara untuk menjadikannya Hilang fokus, dengan itu menghapuskan kursor. Ini akan meningkatkan kemesraan interaksi pengguna dan meningkatkan pengalaman pengendalian pengguna.

Atas ialah kandungan terperinci Kursor tidak hilang apabila anda mengklik di tempat lain pada halaman vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!