Tutorial pengenalan VUE3: Gunakan pemalam Vue.js untuk melaksanakan karusel imej

Vue.js telah menjadi salah satu rangka kerja JavaScript yang paling popular untuk aplikasi web moden. Ia mudah digunakan, fleksibel dan berkuasa. Vue.js 3 telah dikeluarkan pada tahun 2020, membawakan beberapa ciri dan pengoptimuman baharu yang menarik. Dalam artikel ini, kami akan menggunakan pemalam Vue.js untuk melaksanakan karusel imej asas.

1. Pemalam Vue.js

Pemalam Vue.js ialah lanjutan daripada Vue.js. Ia boleh melaksanakan fungsi dan fungsi global yang serupa dengan modul JavaScript. Pemalam biasanya mempunyai fungsi berikut:

• Tambah kaedah atau sifat global.
• Tambah arahan atau penapis global.
• Tambah kaedah contoh.
• Pilihan komponen suntikan, campuran dan banyak lagi.

Mari lihat cara menulis pemalam Vue.js untuk melaksanakan karusel imej.

2. Cipta pemalam karusel bergambar

Untuk mencipta pemalam karusel bergambar, kita perlu menggunakan fungsi Vue.extend untuk merangkum definisi komponen dalam pemalam. Kami juga perlu menggunakan API global yang disediakan oleh Vue.js untuk menambah beberapa fungsi, seperti mixin (Vue.mixin), arahan (Vue.directive), komponen (Vue.component). Mari mulakan pemalam karusel kami dengan coretan kod berikut:

const Carousel = Vue.extend({
  template: `
    <div class="carousel-container">
      <div class="carousel">
        <div class="slides" :style="slideStyle">
          <div v-for="slide in slides" :key="slide.id" class="slide" :style="{ background: slide.image }"></div>
        </div>
        <div>
          <button @click="navigate(-1)">Prev</button>
          <button @click="navigate(1)">Next</button>
        </div>
      </div>
    </div>
  `,
  props: {
    images: {
      type: Array,
      required: true,
      default: () => []
    },
    slideInterval: {
      type: Number,
      default: 3000
    },
    slideSpeed: {
      type: Number,
      default: 500
    }
  },
  computed: {
    slideStyle() {
      return {
        transform: `translateX(${this.currentSlide * -100}%)`,
        transition: `transform ${this.slideSpeed}ms ease-in-out`
      }
    }
  },
  data() {
    return {
      currentSlide: 0,
      slides: []
    }
  },
  created() {
    this.slides = this.images.map((image, index) => {
      return { id: index, image }
    })
    this.start()
  },
  methods: {
    navigate(direction) {
      const totalSlides = this.slides.length
      if (direction === 1) {
        this.currentSlide = (this.currentSlide + 1) % totalSlides
      } else if (direction === -1) {
        this.currentSlide = (this.currentSlide - 1 + totalSlides) % totalSlides
      }
    },
    start() {
      setInterval(() => this.navigate(1), this.slideInterval)
    }
  }
})

Vue.use({
  install(Vue) {
    Vue.component('carousel', Carousel)
  }
})

Kod ini akan menentukan komponen Vue.js lengkap yang mengandungi data dan kaedah untuk imej karusel. Kami kemudian menggunakan Vue.use untuk mendaftarkan komponen sebagai pemalam, yang boleh digunakan secara global.

Dalam kod ini, kami menggunakan templat HTML mudah. Templat termasuk bekas dan Karusel yang mengandungi slaid. Tayangan slaid ialah tatasusunan yang mengandungi URL imej. Kami juga menambah dua butang untuk menavigasi tayangan slaid.

Untuk menghidupkan slaid, kami menggunakan atribut gaya translateX, yang dimulakan dengan nilai -100% untuk mengalihkan slaid ke kedudukan asalnya. Untuk melakukan ini, kami menggunakan prop Vue.js yang menerima selang masa dan kelajuan (dalam milisaat) untuk peralihan kelajuan antara slaid. slaidSpeed.

Kami juga menambah kaedah yang dipanggil "navigasi" yang akan menavigasi ke slaid seterusnya atau slaid sebelumnya berdasarkan arah yang ditentukan. Pemalam ini juga termasuk kaedah yang dipanggil "mula" yang akan memulakan tayangan slaid pada selang masa yang sesuai.

3. Gunakan Pemalam Karusel Imej

Sekarang kami telah mencipta pemalam Karusel Imej kami, mari lihat cara menggunakannya. Pertama, dalam fail HTML anda, tambahkan elemen c813cffef41f0f19d6cfc494a1ce7fa8 Prop ini mestilah tatasusunan yang mengandungi URL imej. Anda boleh menggunakan pemalam ini seperti ini:

<carousel :images="[
    'https://picsum.photos/id/1/800/400',
    'https://picsum.photos/id/2/800/400',
    'https://picsum.photos/id/3/800/400'
]">
</carousel>

Ini mencipta elemen karusel dengan tiga slaid, setiap satu dengan imejnya.

4. Ringkasan

Dengan menggunakan pemalam Vue.js, kami boleh mencipta fungsi global atau menambah ciri baharu dalam aplikasi kami dengan mudah. Dengan menulis pemalam Vue.js asas, kami juga menunjukkan cara menggunakan komponen dan prop Vue.js untuk mencipta karusel imej yang boleh disesuaikan sepenuhnya.

Saya harap artikel ini dapat memberi anda pemahaman yang lebih baik tentang pemalam Vue.js dan cara melaksanakan karusel imej asas saya harap anda boleh mendapat manfaat daripadanya semasa proses pembangunan.

Atas ialah kandungan terperinci Tutorial pengenalan VUE3: Gunakan pemalam Vue.js untuk melaksanakan karusel imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!