Tutorial pengenalan pembangunan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen kesan khas

Vue.js ialah salah satu rangka kerja JavaScript yang paling popular pada masa ini, dan keluaran versi terbaharunya, Vue3, menjadikannya lebih berkuasa dan lebih mudah untuk digunakan. Artikel ini akan memperkenalkan cara menggunakan pemalam Vue.js untuk merangkum komponen kesan pintu masuk, membolehkan anda memasuki dunia Vue3 dengan mudah.

Pemalam Vue.js ialah cara terbaik untuk kami meluaskan fungsi dalam Vue.js. Ia adalah komponen yang boleh digunakan semula dan boleh membungkus beberapa logik dan kod yang sama bersama-sama supaya kita boleh merujuknya dengan cepat di mana kita perlu menggunakannya.

Dalam artikel ini, kami akan menggunakan pemalam Vue.js untuk merangkum komponen kesan khas. Kesan masuk boleh menjadikan aplikasi web kami kelihatan lebih moden dan menarik, dan pada masa yang sama meningkatkan pengalaman pengguna.

Pertama, kita perlu mencipta pemalam Vue.js. Pemalam perlu mempunyai fungsi pemasangan, yang akan dipanggil secara automatik oleh Vue.js untuk memasang pemalam. Di dalam fungsi ini, kami boleh mendaftarkan komponen global, arahan, penapis dan fungsi Vue.js yang lain.

Seterusnya, kami akan mencipta komponen global Vue.js, iaitu div dengan kesan masuk. Kami akan menggunakan peralihan untuk mencipta kesan ini.

Letakkan kod berikut ke dalam folder pemalam Vue.js anda:

import Vue from 'vue'
import EnterEffect from './EnterEffect.vue'

const EnterEffectPlugin = {
  install(Vue) {
    Vue.component('enter-effect', EnterEffect)
  }
}

export default EnterEffectPlugin

Kemudian kami mencipta komponen EnterEffect.vue yang termasuk animasi tunggu dan teks. Tulis kod berikut di dalam komponen:

<template>
  <transition name="enter-effect">
    <div class="enter-effect">
      <div class="enter-effect__gradient" />
      <div class="enter-effect__content">
        <slot />
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'EnterEffect'
}
</script>

<style>
.enter-effect {
  position: relative;
  height: 100%;
  width: 100%;
}

.enter-effect__gradient {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to bottom right, #7F55C6, #4AD0C3);
  opacity: 0.6;
}

.enter-effect__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  font-size: 3rem;
  font-weight: bold;
  color: #ffffff;
}
</style>

Sekarang kita telah mencipta komponen EnterEffect.vue, kita perlu mencipta gaya CSS untuknya. Gaya akan menghidupkan komponen, iaitu dinamik kemasukan yang kami perlukan.

Berikut ialah kod untuk gaya CSS:

.enter-effect-enter-active,
.enter-effect-leave-active {
  transition: opacity 0.5s;
}

.enter-effect-enter,
.enter-effect-leave-to {
  opacity: 0;
}

Kini kami perlu membawa gaya komponen dan gaya CSS ke dalam aplikasi kami. Untuk menambah komponen ini pada aplikasi Vue.js kami, kami hanya perlu mengimport pemalam dan memanggil fungsi Vue.use, dan kemudian komponen itu boleh digunakan.

Dalam aplikasi Vue.js anda, buka fail main.js.

Tambah kod berikut di bahagian atas fail:

import Vue from 'vue'
import App from './App.vue'
import EnterEffectPlugin from './plugins/EnterEffectPlugin'

Vue.config.productionTip = false
Vue.use(EnterEffectPlugin)

new Vue({
  render: h => h(App),
}).$mount('#app')

Kemudian dalam templat komponen anda tambahkan kod berikut:

<enter-effect>
  <h1>Welcome to my Vue.js app.</h1>
</enter-effect>

Sekarang aplikasi Vue.js kami telah selesai. penghasilan kesan dinamik pintu masuk. Kini anda boleh mencuba gaya yang berbeza dan animasi CSS untuk menyesuaikan dinamik kemasukan anda.

Ringkasan

Dalam artikel ini, kami memperkenalkan anda cara menggunakan pemalam dan peralihan Vue.js untuk mencipta komponen kesan masuk. Dengan menggunakan pemalam Vue.js, kami boleh membungkus logik dan kod biasa bersama-sama untuk rujukan pantas di mana kami perlu menggunakannya. Dengan menggunakan peralihan, kami mencipta komponen kesan dinamik kemasukan dengan animasi peralihan.

Cuba cipta gaya CSS dan kesan animasi yang berbeza untuk menyesuaikan kesan khas anda, yang akan menjadikan aplikasi Vue.js anda lebih moden dan menarik.

Atas ialah kandungan terperinci Tutorial pengenalan pembangunan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen kesan khas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!