Tutorial pengenalan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen pop timbul

Vue.js telah menjadi salah satu teknologi yang sangat diperlukan dalam pembangunan web moden. Walaupun beberapa konsep asas dan sintaks Vue.js agak mudah dipelajari, menggali lebih mendalam konsep dan fungsi teras Vue.js memerlukan lebih banyak latihan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan pemalam Vue.js untuk merangkum komponen pop timbul untuk digunakan dalam VUE3.

1. Fahami konsep pemalam Vue.js

Pemalam Vue.js boleh memanjangkan fungsi Vue.js. Pemalam menyediakan fungsi global Vue.js, seperti menambah kaedah global atau mengikat arahan Vue.js. Merangkumkan kod ke dalam pemalam boleh digunakan semula dengan mudah dalam projek Vue.js.

Bentuk pemalam Vue.js yang paling biasa ialah objek Objek, yang mempunyai kaedah pemasangan, yang akan dipanggil dalam tika Vue.js. Dalam kaedah pemasangan, anda boleh menambah fungsi baharu pada contoh Vue.js atau mengubah suai fungsi sedia ada.

2. Cipta pemalam komponen pop timbul Vue.js

Sebelum melaksanakan komponen pop timbul dalam Vue.js, anda perlu mencipta pemalam Vue.js. Pemalam ini menambahkan fungsi komponen pop timbul pada contoh Vue.js.

Langkah pertama dalam mencipta pemalam ialah menulis objek Objek pemalam. Objek Objek mengandungi dua sifat: kaedah pemasangan dan komponen pop timbul.

const PopupPlugin = {
  install: function(Vue, options) {
      // some code
  },
  Popup: PopupComponent
}

Dalam kaedah pemasangan, komponen pop timbul hendaklah ditambahkan pada tika Vue.js. Untuk contoh Vue merujuk kepada komponen dalam pemalam, anda perlu mencipta pembina komponen Vue.js menggunakan kaedah Vue.extend.

const PopupConstructor = Vue.extend(PopupComponent);

Kemudian, gunakan PopupConstructor untuk mencipta tika komponen Popup dan lekapkannya dalam document.body.

const instance = new PopupConstructor({
      el: document.createElement('div')
  });
document.body.appendChild(instance.$el);

Akhir sekali, ikat tika komponen Pop Timbul ke prototaip tika Vue.js. Dengan cara ini, anda boleh menggunakan kaedah this.popup dalam Vue.js untuk memaparkan komponen pop timbul.

Vue.prototype.$popup = function(options) {
      // some code
  }

3. Reka komponen pop timbul Vue.js

Komponen pop timbul mengandungi dua bahagian: templat dan logik. Templat digunakan untuk mentakrifkan penampilan komponen pop timbul dan secara logik mengendalikan interaksi komponen pop timbul.

Pertama, tulis templat komponen pop timbul. Templat perlu ditulis menggunakan sintaks komponen Vue.js.

<template>
  <div>
    <div class="popup-bg"></div>
    <div class="popup-box">
      <slot>
        <!--content-->
      </slot>
      <div class="popup-footer">
        <button class="popup-confirm" @click="confirm">OK</button>
      </div>
    </div>
  </div>
</template>

Seterusnya, tulis logik komponen pop timbul. Logik terutamanya termasuk pengurusan status tetingkap timbul dan pemprosesan acara pengguna.

<script>
    export default {
        data() {
            return {
                show: false,
                title: '',
                message: '',
                confirm: () => {},
            }
        },
        methods: {
            open(title, message, confirm) {
                this.show = true;
                this.title = title;
                this.message = message;
                this.confirm = confirm;
            },
            close() {
                this.show = false;
            }
        }
    }
</script>

Antaranya, kaedah buka digunakan untuk membuka tetingkap timbul dan menetapkan fungsi panggilan balik tajuk, kandungan dan pengesahan tetingkap timbul. Kaedah tutup digunakan untuk menutup tetingkap pop timbul.

4 Gunakan pemalam komponen pop timbul Vue.js

Selepas pemalam komponen pop timbul Vue.js dibuat, anda boleh menggunakan komponen pop timbul itu. menambah pada contoh Vue.js.

Mula-mula, import PopupPlugin dan daftarkannya ke dalam contoh Vue.js.

import PopupPlugin from './path/PopupPlugin'

Vue.use(PopupPlugin);

Kemudian, gunakan kaedah ini.$popup dalam komponen Vue.js untuk membuka tetingkap timbul.

this.$popup(
    '提示',
    '您确定要删除该项吗？',
    () => {
        // some code
    }
);

Contoh ini menunjukkan cara menggunakan pemalam Vue.js untuk merangkum komponen pop timbul dan menggunakannya dalam projek Vue.js. Dengan mencipta pemalam komponen pop timbul Vue.js, anda boleh dengan mudah menambahkan komponen pop timbul pada tika Vue.js untuk mencapai penggunaan semula pantas.

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