Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi isihan seret dan lepas
Kata Pengantar:
Dalam pembangunan web, fungsi isihan seret dan lepas ialah fungsi biasa dan praktikal. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi pengisihan seret dan lepas dan menunjukkan proses pelaksanaan melalui contoh kod.
1. Persediaan persekitaran
npm install -g @vue/cli
vue create drag -sort-demo
Ikuti gesaan untuk memilih pilihan konfigurasi dan tunggu projek dibuat.
npm install element-ui
2 fungsi menyusun ui';
import 'element-ui /lib/theme-chalk/index.css';Buat komponen baharu DragSortDemo.vue dalam src/komponen direktori untuk menunjukkan fungsi pengisihan seret dan lepas . Edit fail DragSortDemo.vue dan tambahkan kod berikut:
<div class="drag-sort-demo"> <el-collapse-transition> <div v-for="item in list" :key="item.id" class="drag-item" :class="{ 'dragging': draggingId === item.id }" draggable="true" @dragstart="handleDragStart(item)" @dragend="handleDragEnd(item)"> {{ item.name }} </div> </el-collapse-transition> </div> <el-button type="primary" @click="handleSort">保存排序</el-button>
return { list: [ { id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 3, name: 'C' }, { id: 4, name: 'D' }, { id: 5, name: 'E' }, ], draggingId: null, };
},
kaedah: {
handleDragStart(item) { this.draggingId = item.id; }, handleDragEnd() { this.draggingId = null; }, handleSort() { const sortedList = Array.from(this.$el.querySelectorAll('.drag-item')).map((el, index) => { const id = el.getAttribute('data-id'); const name = el.textContent; return { id, name, sort: index + 1 }; }); // 将排序后的列表保存到数据库或发送给后端 },
},
};
.drag-sort-demo {
}
padding: 10px;
margin: 10px 0;
background-color: #f5f5f5;
cursor: move;
peralihan bayang-bayang: 0.3s ;
}
.drag-item.dragging {
}
Penjelasan:
Penjelasan:
templat, Gunakan arahan v-for untuk memaparkan item senarai secara dinamik. Kelas item senarai terikat pada sifat yang dikira, yang digunakan untuk menentukan sama ada item yang diseret pada masa ini ialah item senarai.
Tambahkan atribut boleh seret pada setiap item senarai dan daftarkan pengendali acara seret dan seret untuk mencetuskan acara mula dan tamat seretan. Kaedah
handleSort menyimpan atau menghantar data senarai yang diisih seret dan lepas ke bahagian belakang untuk diproses.
<drag-sort-demo></drag-sort-demo>
};
<
projek
Laksanakan arahan berikut dalam baris arahan untuk memulakan projek:
npm run serve
Kesimpulan:
Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi pengisihan seret dan lepas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!