Bagaimana untuk melaksanakan pengisihan senarai dan pengisihan seret dalam Vue?

Dengan pembangunan berterusan teknologi pembangunan bahagian hadapan, semakin banyak tapak web dan aplikasi perlu melaksanakan fungsi pengisihan seret dan lepas pada antara muka. Dalam rangka kerja Vue, kita boleh menggunakan beberapa pustaka atau komponen untuk melaksanakan fungsi pengisihan senarai dan penyeretan dengan mudah.

1. Gunakan sortable.js untuk melaksanakan pengisihan senarai

sortable.js ialah perpustakaan bebas yang boleh menyokong fungsi pengisihan seret dan lepas senarai. Dalam Vue.js, kami menggunakan sortable.js untuk melaksanakan fungsi pengisihan senarai.

Pertama, kita perlu memasang sortable.js dalam projek Anda boleh menggunakan arahan npm untuk memasangnya:

npm install sortablejs --save

Kemudian perkenalkan sortable.js dalam komponen:

import Sortable from 'sortablejs'

Kemudian dalam fungsi cangkuk yang dipasang komponen, gunakan sortable.js untuk memulakan senarai , seperti yang ditunjukkan di bawah:

mounted() {
  let el = this.$refs.list
  this.sortable = Sortable.create(el, {
    onEnd: this.onEnd
  })
},
methods: {
  onEnd: function (evt) {
    // 拖动后的排序操作
  }
}

Antaranya, onEnd ialah fungsi panggil balik apabila item senarai diseret dan digugurkan Dalam fungsi ini, kita boleh menyusun semula urutan senarai, atau menyimpan urutan senarai yang disusun semula ke pangkalan data atau pelayan.

2. Gunakan vue-draggable untuk melaksanakan pengisihan seret

vue-draggable ialah komponen senarai isihan boleh seret berdasarkan Vue.js, yang boleh melaksanakan fungsi isihan seret dan lepas senarai dengan mudah. Gunakan vue-draggable untuk melaksanakan senarai interaktif dalam aplikasi Vue.js, seperti menyeret baris jadual, menukar saiz dan kedudukan jubin, dsb.

Anda boleh menggunakan arahan npm untuk memasang vue-draggable:

npm install vuedraggable --save

Kemudian gunakan komponen vue-draggable dalam komponen, seperti yang ditunjukkan di bawah:

<template>
  <draggable v-model="list" :element="'ul'">
    <li v-for="item in list" :key="item.id">
      {{ item.id }}. {{ item.text }}
    </li>
  </draggable>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    components: { draggable },
    data() {
      return {
        list: [
          { id: 1, text: 'Vue.js' },
          { id: 2, text: 'React.js' },
          { id: 3, text: 'Angular.js' },
          { id: 4, text: 'Ember.js' },
          { id: 5, text: 'Backbone.js' },
          { id: 6, text: 'Knockout.js' }
        ]
      }
    }
  }
</script>

Dalam kod di atas, kami menggunakan komponen vue-draggable untuk merangkum list, dan Arahan model v digunakan untuk mengikat data senarai komponen, supaya susunan senarai boleh diubah dengan menyeret.

3. Gunakan Vue Sortable untuk melaksanakan pengisihan seret dan lepas

Vue Sortable ialah komponen Vue.js, yang membolehkan kami melaksanakan fungsi pengisihan seret dan lepas senarai yang boleh disesuaikan dengan mudah. Vue Sortable tidak memerlukan konfigurasi Anda hanya perlu menggunakan sintaks templat Vue.js yang mudah untuk melaksanakan senarai isihan seret dan lepas.

Memasang Vue Sortable juga boleh dilakukan menggunakan arahan npm:

npm install vue-sortable --save

Kemudian gunakan komponen Vue Sortable dalam komponen seperti yang ditunjukkan di bawah:

<template>
  <div>
    <ul v-sortable="{data: list, onUpdate: onUpdate}">
      <li v-for="item in list" :key="item.id">
        {{ item.id }}. {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
  import VueSortable from 'vue-sortable'

  export default {
    components: { VueSortable },
    data() {
      return {
        list: [
          { id: 1, text: 'Vue.js' },
          { id: 2, text: 'React.js' },
          { id: 3, text: 'Angular.js' },
          { id: 4, text: 'Ember.js' },
          { id: 5, text: 'Backbone.js' },
          { id: 6, text: 'Knockout.js' }
        ]
      }
    },
    methods: {
      onUpdate: function (event) {
        // 拖动后的排序操作
      }
    }
  }
</script>

Dalam kod di atas, kami telah menggunakan arahan vue-sortable untuk menetapkan senarai boleh disusun , dan fungsi panggil balik onUpdate digunakan untuk mengemas kini senarai selepas pengisihan seret selesai.

Melalui tiga kaedah di atas, kami boleh melaksanakan fungsi pengisihan senarai dan penyeretan dengan mudah dalam Vue, menjadikan aplikasi kami lebih interaktif dan lebih mudah digunakan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pengisihan senarai dan pengisihan seret dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!