Rumah > hujung hadapan web > View.js > Bagaimana untuk menggunakan Vue untuk mencapai kesan pengisihan boleh lipat dan seret dan lepas?

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

WBOY
Lepaskan: 2023-06-27 11:27:21
asal
1741 orang telah melayarinya

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>
Salin selepas log masuk

Kemudian, gunakan CSS untuk menggayakan elemen ini.

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

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

.content {
  padding: 10px;
}
Salin selepas log masuk

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';
Salin selepas log masuk
Salin selepas log masuk

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>
  `,
});
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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;
}
Salin selepas log masuk

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';
Salin selepas log masuk
Salin selepas log masuk

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>
  `,
});
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan