label kotak input vue klik untuk membatalkan

Dalam pembangunan Vue, kotak input ialah komponen yang sangat penting. Dalam banyak kes, kami perlu menyesuaikan kotak input untuk mencapai pengalaman pengguna yang lebih baik. Salah satu keperluan biasa ialah menambah label pada kotak input. Teg memainkan fungsi gesaan dan pengelasan yang sangat baik dalam kotak input. Pengguna boleh mencari maklumat yang mereka perlukan dengan cepat berdasarkan tag, sekali gus meningkatkan kecekapan penggunaan. Walau bagaimanapun, apabila kami menambah teg pada kotak input, kami sering menghadapi masalah - cara membatalkan teg yang ditambahkan. Hari ini, kita akan membincangkan isu ini.

1. Bagaimana untuk melaksanakan fungsi menambah tag

Dalam Vue, kita boleh mendapatkan input pengguna melalui arahan model-v. Iaitu, dengan mendapatkan nilai v-model, kita boleh mendapatkan teks yang dimasukkan oleh pengguna. Oleh itu, dalam kotak input mudah, kita boleh melengkapkan fungsi input dengan mengikat model-v. Katakan kita kini perlu menambah label pada kotak input Kita boleh menambah label sebagai komponen bebas dan menggabungkan kotak input dan komponen label. Berikut ialah contoh kod untuk pelaksanaan mudah:

<template>
  <div>
    <label>名称：</label>
    <input type="text" v-model="name">
    <tags :value="tags" @change="handleTagsChange" />
  </div>
</template>

<script>
import Tags from './Tags.vue'

export default {
  components: { Tags },
  data () {
    return {
      name: '',
      tags: []
    }
  },
  methods: {
    handleTagsChange (tags) {
      this.tags = tags
    }
  }
}
</script>

Dalam kod ini, kami mentakrifkan komponen bernama "Tag". Komponen ini ialah komponen label, bertanggungjawab untuk menguruskan semua label. Kami juga menentukan kotak input dengan arahan v-model dan menggabungkan komponen label dengan kotak input. Selepas pengguna memasukkan teks, kita boleh mendengar peristiwa perubahan komponen label dan mengurus label. Dengan cara ini, kita boleh menambah label pada kotak input.

2. Cara menambah butang "Batal" pada label

Semasa proses menambah label, kita mungkin menghadapi situasi: pengguna tersilap mengendalikan, atau menambah label yang salah . Dalam kes ini, pengguna berkemungkinan besar perlu membatalkan teg. Oleh itu, menambah butang "Batal" di sebelah kanan label ialah pilihan yang baik. Jadi, bagaimana untuk melaksanakan fungsi ini?

Kami boleh menambah acara padam pada komponen label Apabila pengguna mengklik butang "Batal", acara ini dicetuskan dan label semasa dipadamkan daripada komponen. Berikut ialah kod contoh mudah:

<template>
  <span class="tag with-cancel" v-for="(tag, index) in tags">
    {{ tag }}
    <button class="delete" @click="deleteTag(index)">X</button>
  </span>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
      tags: this.value.slice()
    }
  },
  methods: {
    deleteTag (index) {
      this.tags.splice(index, 1)
      this.$emit('change', this.tags)
    }
  }
}
</script>

Dalam kod ini, kami menambah gaya pada komponen label yang menunggu acara pemadaman dan juga menambah butang "Batal" pada setiap label. Apabila butang diklik, kami memadamkan teg semasa dengan memanggil kaedah deleteTag dan mencetuskan peristiwa perubahan melalui kaedah $emit.

3. Cara menangani masalah semasa membatalkan teg

Selepas melaksanakan fungsi "batalkan" teg, kita perlu mempertimbangkan cara menyelesaikan beberapa masalah yang disebabkan oleh pemadaman teg. Sebagai contoh, apabila pengguna memadamkan label, keseluruhan kandungan kotak input mungkin dipadamkan. Pada masa ini, kita perlu meletakkan semula kursor ke kedudukan yang betul.

Untuk menyelesaikan masalah ini, kita perlu mendapatkan kedudukan kursor kotak input sebelum dan selepas pemadaman apabila memadamkan label, dan kemudian gerakkan kursor ke kedudukan yang betul selepas memadamkan label. Berikut ialah kod sampel mudah:

deleteTag (index) {
  const input = this.$refs.input
  const startPos = input.selectionStart
  const endPos = input.selectionEnd
  this.tags.splice(index, 1)
  this.$nextTick(() => {
    const delta = startPos - endPos
    input.selectionStart = startPos - delta
    input.selectionEnd = endPos - delta
    this.$emit('change', this.tags)
  })
}

Dalam kod ini, kita mendapat kedudukan kursor sebelum pemadaman dengan mendapatkan sifat selectionStart dan selectionEnd bagi kotak input. Kami kemudian memindahkan kursor ke lokasi yang betul selepas memadamkan label. Apa yang perlu diperhatikan di sini ialah kami tidak boleh mengendalikan elemen DOM secara langsung dalam kaedah, jika tidak, beberapa ralat akan berlaku. Oleh itu, kami menggunakan kaedah $nextTick untuk mengemas kini elemen DOM selepas kemas kini komponen seterusnya selesai.

Ringkasan

Dalam Vue, kotak input ialah komponen yang sangat biasa digunakan. Untuk meningkatkan pengalaman pengguna, kami selalunya perlu menambah label pada kotak input dan menambah label butang "Batal". Apabila melaksanakan fungsi ini, kita perlu memberi perhatian kepada beberapa butiran, seperti mengendalikan kedudukan kursor. Hanya dengan berfikir dengan teliti kita boleh menjadikan kotak input kita lebih sempurna.

Atas ialah kandungan terperinci label kotak input vue klik untuk membatalkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!