Cara melaksanakan komponen boleh seret dalam dokumentasi Vue

Vue ialah rangka kerja JavaScript sumber terbuka yang sangat popular yang menyediakan pelbagai komponen dan alatan untuk memudahkan pembangunan bahagian hadapan. Satu komponen yang amat berguna ialah komponen boleh seret. Artikel ini akan memperkenalkan pelaksanaan komponen boleh seret dalam dokumen Vue.

Vue menyediakan pemalam yang dipanggil draggable untuk melaksanakan ciri menyeret. Pemalam ini boleh menambah ciri boleh seret pada mana-mana elemen dalam Vue, dan menyokong ciri lanjutan seperti pengisihan pilihan dan mengehadkan julat pergerakan semasa menyeret.

Dalam artikel ini, kami akan menggunakan Vue-cli dan npm untuk mencipta dan mengurus projek. Vue-cli ialah alat perancah Vue yang disediakan secara rasmi yang boleh membuat aplikasi berasaskan Vue dengan cepat.

Pertama, laksanakan arahan berikut dalam baris arahan untuk memasang Vue-cli:

npm install -g vue-cli

Seterusnya, kami akan mencipta projek Vue baharu menggunakan Vue-cli :

vue init webpack drag-and-drop

Perintah ini akan mencipta projek Vue baharu bernama drag-and-drop menggunakan webpack sebagai alat binaan. Dalam tempoh ini, anda boleh memilih sama ada untuk memasang sambungan lain seperti vue-router dan ESLint.

Selepas pemasangan selesai, anda boleh menggunakan arahan berikut untuk memasuki direktori di mana projek itu terletak:

cd drag-and-drop

Seterusnya, kita perlu memasang pemalam boleh seret:

npm install vuedraggable

Ini akan memasang versi terkini pemalam boleh seret.

Kini, kita boleh menggunakan pemalam boleh seret dalam komponen Vue. Untuk menunjukkan cara menggunakan komponen boleh seret, kami akan mencipta aplikasi mudah yang mengandungi senarai tugasan. Pengguna boleh menyusun semula senarai tugas dengan menyeret tugas.

Buka fail src/components/TodoList.vue dan tambah kod berikut:

<template>
  <div>
    <h2>待办事项列表</h2>
    <draggable v-model="tasks">
      <div v-for="(task,index) in tasks" :key="index">
        <input type="checkbox" v-model="task.completed">
        <span>{{ task.title }}</span>
      </div>
    </draggable>
    <button @click="addTask()">添加任务</button>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'TodoList',
  components: {
    draggable,
  },
  data() {
    return {
      tasks: [
        { title: '完成Vue项目', completed: false },
        { title: '阅读Vue文档', completed: true },
        { title: '学习JavaScript', completed: false },
      ],
    };
  },
  methods: {
    addTask() {
      this.tasks.push({
        title: '新增任务',
        completed: false,
      });
    },
  },
};
</script>

Komponen ini mentakrifkan kad yang mengandungi senarai tugas kami. Kami menggunakan komponen boleh seret untuk menjadikan setiap tugas boleh diseret.

Dalam contoh ini, kami menggunakan arahan model-v untuk mengikat tatasusunan tugas. Ini bermakna kita boleh menyusun semula tatasusunan ini dengan menyeret tugasan, seterusnya mengubah susunan tugasan.

Kami juga boleh melihat butang "Tambah Tugasan" Apabila mengklik butang ini akan menambah tugasan baharu pada tatasusunan.

Kami juga menggunakan atribut yang dikira untuk mengira bilangan tugasan yang belum selesai.

Akhir sekali, kami perlu menambah komponen TodoList pada aplikasi kami.

Buka fail src/App.vue dan tambah kod berikut:

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

<script>
import TodoList from '@/components/TodoList';

export default {
  name: 'App',
  components: {
    TodoList,
  }
};
</script>

Komponen ini mentakrifkan aplikasi kami dan menambah komponen TodoList pada halaman.

Tahniah, anda telah berjaya membuat senarai tugasan yang boleh diisih mengikut drag-and-drop dengan Vue.

Vue-cli dan pemalam boleh seret ialah alatan berkuasa untuk membina aplikasi Vue yang berkuasa. Walau bagaimanapun, perlu diingatkan bahawa artikel ini hanya menyediakan contoh asas Jika anda ingin menggunakan ciri seret dan lepas Vue dalam aplikasi sebenar, anda perlu memohon dan mengubah suainya untuk memenuhi keperluan anda.

Atas ialah kandungan terperinci Cara melaksanakan komponen boleh seret dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!