Mula Pantas VUE3: Gunakan pemalam Vue.js untuk mencipta komponen pop timbul

Vue.js ialah rangka kerja JavaScript popular yang menyediakan cara berasaskan komponen untuk membina antara muka pengguna. Vue.js versi 3 terbaharu bukan sahaja dioptimumkan dalam prestasi, tetapi juga menambah beberapa ciri baharu. Dalam artikel ini, kami akan memperkenalkan dengan cepat cara menggunakan Vue.js 3 dan pemalam untuk mencipta komponen pop timbul.

1. Cipta aplikasi Vue.js 3

Sebelum anda bermula, anda perlu memasang Node.js dan Vue CLI. Anda boleh memasang alatan ini menggunakan npm:

npm install -g @vue/cli

Seterusnya, buat aplikasi Vue.js 3 baharu menggunakan Vue CLI:

vue create my-app
cd my-app
npm run serve

Ini akan mencipta fail yang dipanggil "aplikasi saya" aplikasi baharu dan mulakan pelayan pembangunan.

2. Pasang pemalam Vue.js

Untuk mencipta komponen pop timbul, kami akan menggunakan pemalam yang dipanggil Vue.js Modal. Untuk memasang pemalam, jalankan arahan berikut:

npm install vue-js-modal

Buka fail src/main.js dan tambah kandungan berikut:

import Vue from 'vue'
import App from './App.vue'
import VModal from 'vue-js-modal'

Vue.config.productionTip = false

Vue.use(VModal)

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

Mula-mula, kami mengimport komponen Vue dan App. Seterusnya, kami mengimport pemalam Vue.js Modal dan melaksanakan Vue.use(VModal) untuk menggunakannya sebagai sambungan kepada aplikasi Vue.js.

3. Cipta komponen pop timbul

Kini, kita boleh mula mencipta komponen pop timbul kita sendiri. Dalam kes ini, kami akan mencipta borang log masuk mudah sekiranya pengguna cuba melakukan tindakan yang memerlukan log masuk.

Pertama, kita perlu mencipta komponen Vue.js baharu. Cipta fail baharu bernama LoginModal.vue dan salin kod berikut ke dalamnya:

<template>
  <div id="login-modal">
    <h1>Login</h1>
    <form>
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // Your login logic goes here
      this.$emit('close')
    }
  }
}
</script>

Komponen ini mengandungi borang di mana pengguna boleh memasukkan nama pengguna dan kata laluan mereka. Apabila borang diserahkan, kami akan memanggil kaedah log masuk yang akan mengandungi logik log masuk anda. Dalam contoh ini, kami hanya menggunakan kaedah pemegang tempat dan mengeluarkan peristiwa rapat di dalamnya untuk menutup tetingkap timbul.

Sekarang, kami akan menggunakan komponen LoginModal ini dalam komponen lain untuk mencipta tetingkap pop timbul.

4. Gunakan komponen pop timbul

untuk membuka fail App.vue dan menambah kandungan berikut di mana-mana dalam teg templat:

<modal name="login-modal">
  <login-modal @close="$modal.hide('login-modal')"></login-modal>
</modal>
<button @click="$modal.show('login-modal')">Show Login Modal</button>

Kod ini menggunakan Vue. Komponen dan arahan yang disediakan oleh pemalam js Modal. Pertama, kami mentakrifkan tetingkap modal yang dinamakan menggunakan sifat Nama. Tetingkap modal ini mengandungi komponen LoginModal yang baru kami buat. Kemudian, butang ditambahkan pada halaman, dan apabila diklik, tetingkap modal akan dipaparkan.

Untuk menutup tetingkap modal, kita perlu memancarkan peristiwa tertutup dalam komponen LoginModal. Dengan menggunakan kaedah $modal.hide('login-modal'), kita boleh mendengarnya dalam komponen induk dan menutup tetingkap modal.

5. Kesimpulan

Dalam artikel ini, kami mempelajari cara menggunakan Vue.js 3 dan pemalam untuk mencipta komponen pop timbul. Pemalam Vue.js Modal memberikan kami keupayaan untuk mencipta tetingkap modal secara langsung dan kami hanya perlu menggunakan komponen Vue.js yang ringkas. Dengan cara ini kita boleh membuat antara muka pengguna yang kompleks dengan cepat dan mudah yang membolehkan pengguna berinteraksi dengan aplikasi web interaktif.

Atas ialah kandungan terperinci Mula Pantas VUE3: Gunakan pemalam Vue.js untuk mencipta komponen pop timbul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!