Bagaimana untuk menggunakan Vue untuk mencapai kesan pengisihan boleh lipat dan seret dan lepas?

Dalam pembangunan bahagian hadapan, adalah keperluan biasa untuk mencapai kesan pengisihan boleh lipat dan seret dan lepas. Fungsi ini boleh dilaksanakan dengan mudah dan cepat menggunakan rangka kerja Vue. Artikel ini akan memperkenalkan cara menggunakan Vue untuk mencapai kesan pengisihan boleh lipat dan seret dan lepas, menjadikan halaman kelihatan lebih cantik dan lebih mudah digunakan.

1. Kesan boleh lipat

1.1 Tulis kod HTML dan CSS

Mula-mula, buat elemen yang perlu dilipat dalam HTML, seperti yang ditunjukkan di bawah:

<div class="collapse">
  <div class="header">折叠标题</div>
  <div class="content">折叠内容</div>
</div>

Kemudian, gunakan CSS untuk menggayakan elemen ini.

.collapse {
  border: 1px solid #ccc;
}

.header {
  background-color: #eee;
  cursor: pointer;
  padding: 10px;
}

.content {
  padding: 10px;
}

Di sini, kami menambah sempadan pada kotak akordion, tetapkan warna latar belakang dan gaya kursor. Pada masa yang sama, kami menambah acara klik pada tajuk untuk menukar keadaan paparan/tersembunyi kandungan apabila tajuk diklik.

1.2 Tambah komponen Vue

Seterusnya, kita perlu mencipta komponen Vue untuk kesan boleh lipat. Pertama, kami ingin mengimport Vue:

import Vue from 'vue';

Kemudian, kita boleh mencipta komponen menggunakan kaedah Vue.component():

Vue.component('collapse', {
  props: {
    header: String,
    content: String,
  },
  data() {
    return {
      show: false, // 初始状态为隐藏
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
  template: `
    <div class="collapse">
      <div class="header" @click="toggle">{{ header }}</div>
      <div class="content" v-show="show">{{ content }}</div>
    </div>
  `,
});

Di sini, kami telah mencipta komponen yang dipanggil 'runtuh'. Ia boleh menerima dua atribut: pengepala dan kandungan. Kami menggunakan kaedah data() untuk mencipta pembolehubah rancangan yang nilai awalnya palsu, menunjukkan bahawa kandungan kotak lipat disembunyikan. Kami kemudian menggunakan kaedah toggle() untuk menogol nilai pembolehubah tunjukkan apabila tajuk diklik. Akhir sekali, kami menggunakan atribut templat untuk menentukan struktur HTML komponen.

1.3 Menggunakan komponen dalam HTML

Akhir sekali, kita hanya perlu menggunakan komponen ini dalam HTML:

<collapse header="折叠标题" content="折叠内容"></collapse>

Di sini kita menghantar dua atribut kepada komponen: pengepala dan kandungan. Ini akan dipaparkan dalam komponen sebagai tajuk dan kandungan kotak runtuh masing-masing. Selepas mengklik pada tajuk, kandungan akan berkembang atau runtuh.

2. Kesan pengisihan seret dan lepas

2.1 Menulis kod HTML dan CSS

Mari kita lihat dahulu cara mencapai kesan seret dan lepas. Mula-mula, kami mencipta elemen yang perlu diisih dalam HTML, seperti yang ditunjukkan di bawah:

<div id="app">
  <div class="sortable">
    <div v-for="(item, index) in items" :key="item.id" class="item" :data-index="index">{{ item.name }}</div>
  </div>
</div>

Kemudian, kami menggayakan elemen ini menggunakan gaya CSS.

.sortable {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
}

.item {
  background: #eaeaea;
  border: 1px solid #ccc;
  cursor: grab;
  margin: 10px;
  padding: 10px;
  text-align: center;
  width: 100px;
}

Di sini, kami menggunakan susun atur fleksibel supaya elemen boleh membalut secara automatik. Setiap elemen mempunyai latar belakang dan jidar kelabu Apabila tetikus melayang di atasnya, gaya kursor akan berubah kepada "grab", menunjukkan bahawa ia boleh diseret.

2.2 Tambah komponen Vue

Untuk mencapai kesan pengisihan seret dan lepas, kita juga perlu menambah komponen Vue. Sekali lagi, kami ingin mengimport Vue:

import Vue from 'vue';

Kemudian, kami mencipta komponen menggunakan kaedah Vue.component():

Vue.component('sortable', {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
      ],
    };
  },
  mounted() {
    const sortable = new Sortable(this.$el, {
      animation: 150,
      onEnd: event => {
        const item = this.items.splice(event.oldIndex, 1)[0];
        this.items.splice(event.newIndex, 0, item);
      },
    });
  },
  template: `
    <div class="sortable">
      <div v-for="(item, index) in items" :key="item.id" class="item" :data-index="index">{{ item.name }}</div>
    </div>
  `,
});

Di sini, kami mencipta komponen yang dipanggil "sortable". Kami menggunakan kaedah data() untuk mencipta tatasusunan item, yang mengandungi elemen yang perlu diisih. Kami kemudian menggunakan kaedah mounted() untuk memulakan pustaka Sortable selepas komponen dimuatkan dan menggunakannya pada elemen akar komponen. Kami menggunakan atribut templat untuk menentukan struktur HTML komponen.

Pada penghujung penyeretan, kami menggunakan kaedah onEnd() untuk mengemas kini tatasusunan item. Kami menggunakan kaedah splice() untuk mengalih keluar elemen daripada tatasusunan item dan mengembalikannya, dan menggunakan kaedah splice() untuk memasukkan elemen ke kedudukan baharu.

2.3 Menggunakan komponen dalam HTML

Akhir sekali, kami menggunakan komponen ini dalam HTML:

<sortable></sortable>

Ini akan menunjukkan kepada kami elemen yang boleh diseret dan kesan pengisihannya.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan Vue untuk mencapai kesan pengisihan boleh lipat dan seret dan lepas. Teknologi ini boleh membantu kami menjadikan reka bentuk halaman lebih cantik dan lebih mudah digunakan. Teknik ini amat berguna untuk projek peribadi dan komersial. Kami berharap artikel ini membantu anda lebih memahami cara menggunakan Vue untuk mencapai kesan interaktif ini dan menerapkannya dalam projek masa hadapan untuk menjadikan halaman anda kelihatan lebih menarik dan mudah digunakan.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk mencapai kesan pengisihan boleh lipat dan seret dan lepas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!