Cara melaksanakan pergerakan drag-and-drop medan borang dalam pemprosesan borang Vue

Cara melaksanakan pergerakan seret dan lepas medan borang dalam pemprosesan borang Vue

Dalam pembangunan Vue, borang ialah komponen yang sangat biasa, dan kadangkala kita perlu seret dan lepas medan borang. Artikel ini akan memperkenalkan cara melaksanakan pergerakan seret dan lepas medan borang dalam pemprosesan borang Vue dan menyediakan contoh kod yang sepadan.

1. Gunakan pemalam Vue.Draggable

Vue.Draggable ialah pemalam seret dan lepas berdasarkan Vue, yang boleh membantu kami mencapai kesan seret dan lepas elemen. Berikut ialah langkah asas untuk menggunakan pemalam Vue.Draggable untuk melaksanakan pergerakan seret dan lepas medan borang:

1. Pasang Vue.Draggable:

Gunakan npm atau benang untuk memasang pemalam Vue.Draggable projek:

npm install vuedraggable --save

2. Perkenalkan Vue.Draggable:

Perkenalkan Vue.Draggable ke dalam komponen Vue dan daftarkannya sebagai komponen global:

import draggable from 'vuedraggable';
Vue.component('draggable', draggable);

3. Takrifkan senarai medan borang:
🜎 Takrifkan senarai medan dalam data. Data setiap medan termasuk nama medan dan jenis medan:

data() {
  return {
    formFields: [
      { name: '用户名', type: 'text' },
      { name: '密码', type: 'password' },
      { name: '邮箱', type: 'email' },
      // ...
    ]
  }
}

Gunakan komponen Vue.Draggable:

Gunakan komponen Vue.Draggable dalam templat untuk memaparkan senarai medan borang dan mencapai seret dan lepas kesan:

<draggable v-model="formFields" group="formFieldsGroup">
  <div v-for="(field, index) in formFields" :key="index">
    <div>{{ field.name }}</div>
    <div>{{ field.type }}</div>
  </div>
</draggable>

Dalam kod di atas, gunakan arahan v-for untuk memaparkan borang dalam senarai Medan gelung, tambahkan kesan seret dan lepas pada setiap medan.

Susun semula medan borang:

Apabila pengguna menyeret dan mengalihkan medan borang, Vue.Draggable akan mengemas kini pengisihan senarai medan borang secara automatik. Kita boleh mendapatkan tempahan medan borang terkini dengan mendengar acara dragend:

<draggable v-model="formFields" group="formFieldsGroup" @end="onDragEnd">
  <!-- ... -->
</draggable>

methods: {
  onDragEnd() {
    console.log(this.formFields);
  }
}

Dalam kaedah onDragEnd, kita boleh mendapatkan pesanan medan borang terkini.

2. Simpan pesanan selepas menyeret dan bergerak

Melalui langkah di atas, kami telah menyedari kesan seret dan lepas medan borang, tetapi apabila halaman dimuat semula, pengisihan medan borang akan kembali ke keadaan asal . Untuk menyelesaikan masalah ini, kita perlu menyimpan susunan medan borang ke bahagian belakang atau storan setempat.

Di sini, kami menggunakan localStorage untuk menyimpan susunan medan borang. Berikut ialah langkah pelaksanaan khusus:

Tambah fungsi alat localStorage:

Tambah fungsi alat localStorage pada projek untuk membaca dan menyimpan susunan medan borang. Anda boleh mencipta fail utils.js dan menambah kod berikut:

export function getFormFields() {
  return JSON.parse(localStorage.getItem('formFields')) || [];
}

export function saveFormFields(formFields) {
  localStorage.setItem('formFields', JSON.stringify(formFields));
}

Kemas kini senarai medan borang:

Dalam kitaran hayat komponen Vue yang dicipta, baca susunan medan borang dari localStorage dan kemas kini senarai medan borang :

import { getFormFields, saveFormFields } from 'utils';

export default {
  // ...
  created() {
    this.formFields = getFormFields();
  },
  // ...
}

Pantau kemas kini pesanan medan borang:

Untuk memantau perubahan susunan medan borang dalam masa nyata, data dalam localStorage perlu dikemas kini selepas seretan selesai:

<draggable v-model="formFields" group="formFieldsGroup" @end="onDragEnd">
  <!-- ... -->
</draggable>

methods: {
  onDragEnd() {
    saveFormFields(this.formFields);
  }
}

Melalui langkah di atas, kami berjaya melaksanakan pergerakan seret dan lepas medan borang dan menyimpan fungsi jujukan.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan pemalam Vue.Draggable dalam pemprosesan borang Vue untuk melaksanakan pergerakan seret dan lepas medan borang dan menyimpan susunan medan borang melalui localStorage. Dengan cara ini, kami boleh menyesuaikan susunan medan borang dengan mudah, meningkatkan pengalaman pengguna dan fleksibiliti operasi.

Perkara di atas adalah mengenai cara melaksanakan pergerakan seret dan lepas medan borang dalam pemprosesan borang Vue, saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Cara melaksanakan pergerakan drag-and-drop medan borang dalam pemprosesan borang Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!