Bagaimana untuk menetapkan panjang yang diterima dalam Vue

Vue selalunya perlu memproses panjang kotak input untuk memastikan kandungan yang dimasukkan oleh pengguna memenuhi keperluan. Dalam kebanyakan kes, kami ingin mengehadkan panjang input pengguna, terutamanya apabila ia melibatkan maklumat sensitif seperti nama pengguna dan kata laluan. Bagaimana untuk menetapkan panjang yang diterima dalam Vue? Berikut akan memperkenalkannya dari tiga aspek: konsep asas, pelaksanaan komponen dan aplikasi praktikal.

1. Konsep asas

Sebelum memperkenalkan cara menetapkan panjang penerimaan dalam Vue, anda perlu memahami beberapa konsep asas terlebih dahulu.

1. Kotak input

Kotak input merujuk kepada kawalan di mana pengguna boleh memasukkan aksara, nombor, dsb. Kotak input dikapsulkan dalam Vue, dan pengikatan dua hala dengan kotak input boleh dicapai melalui model v.

2. Panjang

Panjang merujuk kepada bilangan aksara yang dimasukkan dalam kotak input. Dalam Vue, anda boleh mendapatkan kandungan dalam kotak input melalui nilai model v, dan menggunakan panjang kandungan untuk mengehadkannya.

3. Elakkan suntikan watak khas

Apabila mengehadkan panjang, anda perlu memberi perhatian kepada masalah suntikan watak khas. Suntikan aksara khas merujuk kepada menyerang sistem atau melakukan operasi haram dengan memasukkan aksara khas. Untuk mengelakkan suntikan aksara khas, nilai input kotak input perlu ditapis atau dikeluarkan.

2. Pelaksanaan komponen

Untuk mengehadkan panjang input kotak input, ia boleh dicapai dengan menyesuaikan komponen. Berikut mengambil komponen kotak input mudah sebagai contoh untuk menunjukkan cara menetapkan panjang penerimaan.

1 Tentukan komponen

Mula-mula, tentukan komponen kotak input dalam Vue, termasuk kotak input dan had panjang yang sepadan. Kod khusus adalah seperti berikut:

<template>
  <div>
    <input type="text" v-model="inputValue" @input="onInput" />
    <div>{{ count }}/20</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      count: 0,
    };
  },
  methods: {
    onInput() {
      this.count = this.inputValue.length;
      if (this.count > 20) {
        this.inputValue = this.inputValue.slice(0, 20);
        this.count = this.inputValue.length;
      }
    },
  },
};
</script>

2. Kod penghuraian

Kod di atas mentakrifkan atribut data bernama inputValue, yang digunakan untuk menyimpan nilai kotak input. Pada masa yang sama, atribut data bernama count ditakrifkan, yang digunakan untuk mengira panjang aksara dalam kotak input. Dengar peristiwa input dalam kaedah onInput untuk melaksanakan pengikatan dua hala dan had panjang kotak input. Apabila panjang aksara dalam kotak input melebihi 20, 20 aksara pertama akan dipotong daripada kandungan dalam kotak input.

3. Gunakan komponen

Perkenalkan dan gunakan komponen kotak input di mana sahaja anda perlu menggunakannya. Kod khusus adalah seperti berikut:

<template>
  <div>
    <input-length-limit />
  </div>
</template>

<script>
import InputLengthLimit from "@/components/InputLengthLimit.vue";

export default {
  components: {
    InputLengthLimit,
  },
};
</script>

Kod di atas menggunakan komponen komponen Vue untuk memperkenalkan komponen InputLengthLimit yang ditakrifkan di atas ke dalam komponen semasa. Kemudian gunakan komponen ini terus dalam templat untuk mengehadkan panjang kotak input.

3. Aplikasi Praktikal

Selain komponen tersuai, anda juga boleh menggunakan arahan yang disediakan oleh Vue untuk mengehadkan panjang kotak input dalam aplikasi sebenar. Berikut menggunakan senario aplikasi praktikal untuk menunjukkan cara menggunakan arahan untuk menetapkan panjang penerimaan.

1. Penerangan senario

Andaikan terdapat halaman pendaftaran, yang mengandungi empat kotak input untuk nama pengguna, kata laluan, kata laluan pengesahan dan e-mel. Antaranya, panjang kotak input nama pengguna dan kata laluan perlu dihadkan kepada 20 aksara, dan panjang kotak input e-mel perlu dihadkan kepada 50 aksara.

2. Pelaksanaan kod

Kod khusus adalah seperti berikut:

<template>
  <div>
    <div class="form-item">
      <label for="username">用户名：</label>
      <input id="username" v-limit-length:20 />
    </div>
    <div class="form-item">
      <label for="password">密码：</label>
      <input id="password" v-limit-length:20 />
    </div>
    <div class="form-item">
      <label for="confirm-password">确认密码：</label>
      <input id="confirm-password" />
    </div>
    <div class="form-item">
      <label for="email">邮箱：</label>
      <input id="email" v-limit-length:50 />
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    "limit-length": {
      inserted: function(el, binding) {
        el.addEventListener("input", function() {
          const maxLength = binding.value;
          const inputValue = el.value;
          if (inputValue.length > maxLength) {
            el.value = inputValue.slice(0, maxLength);
          }
        });
      },
    },
  },
};
</script>

Dalam kod di atas, arahan tersuai v-limit-length digunakan untuk merealisasikan panjang kotak input terhad. Ikat arahan ini pada setiap kotak input pada halaman pendaftaran untuk melaksanakan sekatan panjang pada kotak input yang berbeza. Dalam fungsi cangkuk yang dimasukkan dalam arahan, peristiwa input kotak input dipantau untuk melaksanakan pemantauan dan had panjang input kotak input.

4. Ringkasan

Had pada panjang kotak input dalam Vue boleh dilaksanakan melalui komponen atau arahan tersuai. Semasa proses pelaksanaan, anda perlu memberi perhatian kepada masalah suntikan aksara khas, dan menapis atau melarikan nilai input kotak input untuk memastikan keselamatan sistem. Menggunakan kaedah di atas boleh mengehadkan panjang kotak input dengan mudah dan meningkatkan kemudahan penggunaan dan pengalaman pengguna sistem.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan panjang yang diterima dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!