Bagaimana untuk melaksanakan lapisan pop timbul dan kotak modal dalam Vue?

Vue ialah rangka kerja bahagian hadapan berasaskan JavaScript yang menyediakan banyak alatan dan komponen yang mudah untuk membina antara muka aplikasi satu halaman (SPA) dan interaksi pengguna. Antaranya, lapisan pop timbul (modal) dan kotak modal (popover) ialah komponen UI biasa, yang juga boleh dilaksanakan dengan mudah dalam Vue. Artikel ini akan memperkenalkan cara untuk melaksanakan lapisan pop timbul dan kotak modal dalam Vue.

1. Lapisan pop timbul

Lapisan pop timbul biasanya digunakan untuk menggesa mesej, memaparkan menu atau panel operasi dan biasanya perlu meliputi seluruh halaman atau sebahagian kawasan. Melaksanakan lapisan pop timbul dalam Vue memerlukan penggunaan komponen dan slot dinamik.

1. Buat komponen lapisan pop timbul

Pertama, kita perlu mencipta komponen lapisan pop timbul. Di sini, kami mencipta komponen lapisan pop timbul bernama Modal dan memasukkan slot untuk memuatkan kandungan secara dinamik yang perlu dipaparkan.

<template>
  <div class="modal-container" v-show="show">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
}
</style>

Dalam kod di atas, kami mula-mula mentakrifkan komponen bernama Modal dan lulus dalam prop bernama show, yang digunakan untuk mengawal sama ada lapisan pop timbul dipaparkan. Dalam templat komponen, kami menggunakan slot dinamik untuk memaparkan kandungan yang perlu dipaparkan dalam lapisan pop timbul. Kami kemudian menetapkan beberapa gaya untuk memusatkan lapisan pop timbul dan menambah warna latar belakang separa telus.

2. Gunakan komponen Modal dalam komponen yang perlu memaparkan lapisan popup

Seterusnya, kita perlu menggunakan komponen Modal dalam komponen yang perlu memaparkan lapisan popup. Di sini, kami mencipta komponen akar yang dipanggil App dan menambah butang dalam komponen untuk mencetuskan paparan lapisan pop timbul.

<template>
  <div class="app">
    <button @click="showModal = !showModal">显示弹出层</button>
    <modal v-bind:show="showModal">
      <p>这是弹出层中的内容</p>
    </modal>
  </div>
</template>

<script>
import Modal from './components/Modal.vue'

export default {
  name: 'App',
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style>
.app {
  padding: 20px;
}
</style>

Dalam kod di atas, kami mula-mula mengimport komponen Modal yang ditakrifkan sebelum ini dan menambah butang pada templat komponen untuk mencetuskan paparan lapisan pop timbul. Kemudian, kami menggunakan arahan v-bind untuk mengikat atribut showModal kepada atribut show komponen Modal. Akhir sekali, kami meletakkan kandungan yang perlu dipaparkan dalam lapisan pop timbul dalam slot komponen Modal.

2. Kotak modal

Kotak modal biasanya digunakan untuk menggesa pengguna mengesahkan atau memilih, sambil menghalang pengguna daripada melakukan operasi lain sebelum melakukan operasi. Sama seperti lapisan pop timbul, komponen dan slot dinamik juga diperlukan untuk melaksanakan kotak modal dalam Vue.

1. Buat komponen modal

Pertama, kita perlu mencipta komponen modal. Di sini, kami mencipta komponen modal bernama Pengesahan dan mengandungi dua slot, satu untuk memaparkan maklumat segera dan satu lagi untuk memaparkan butang pengesahan dan batal.

<template>
  <div class="modal-container" v-show="show">
    <div class="modal-content">
      <div class="modal-body">
        <slot name="body"></slot>
      </div>
      <div class="modal-footer">
        <slot name="footer">
          <button @click="cancel">取消</button>
          <button @click="confirm">确认</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Confirmation',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    onCancel: Function,
    onConfirm: Function
  },
  methods: {
    cancel() {
      this.onCancel && this.onCancel()
    },
    confirm() {
      this.onConfirm && this.onConfirm()
    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-footer button {
  margin-left: 10px;
}
</style>

Dalam kod di atas, kami mencipta komponen kotak modal bernama Pengesahan dan lulus dalam sifat bernama show, onCancel dan onConfirm, yang digunakan untuk mengawal sama ada kotak modal dipaparkan, membatalkan operasi dan mengesahkan beroperasi. Dalam templat komponen, kami menggunakan dua slot, satu untuk memaparkan maklumat segera dan satu untuk memaparkan butang sahkan dan batal. Dalam kaedah tersebut, kami mentakrifkan kaedah membatalkan dan mengesahkan untuk mengendalikan operasi pembatalan dan pengesahan, dan mencetuskan fungsi panggil balik yang diluluskan oleh komponen induk dalam kaedah ini.

2. Gunakan komponen Pengesahan dalam komponen yang perlu memaparkan kotak modal

Seterusnya, kita perlu menggunakan komponen Pengesahan dalam komponen yang perlu memaparkan kotak modal. Di sini, kami mencipta komponen akar bernama App dan menambah butang dalam komponen untuk mencetuskan komponen Pengesahan untuk memaparkan kotak modal.

<template>
  <div class="app">
    <button @click="showModal = !showModal">显示模态框</button>
    <confirmation
      v-bind:show="showModal"
      v-bind:onCancel="cancel"
      v-bind:onConfirm="confirm"
    >
      <template v-slot:body>
        <p>确定要删除吗？</p>
      </template>
    </confirmation>
  </div>
</template>

<script>
import Confirmation from './components/Confirmation.vue'

export default {
  name: 'App',
  components: {
    Confirmation
  },
  data() {
    return {
      showModal: false
    }
  },
  methods: {
    cancel() {
      this.showModal = false
    },
    confirm() {
      alert('删除成功！')
      this.showModal = false
    }
  }
}
</script>

<style>
.app {
  padding: 20px;
}
</style>

Dalam kod di atas, kami menggunakan komponen Pengesahan sebagai komponen kotak modal dan mengikat atribut showModal, kaedah membatalkan dan mengesahkan kaedah kepada sifat komponen Pengesahan. Dalam slot komponen Pengesahan, kami memaparkan maklumat segera untuk dipaparkan. Dalam templat Vue, kami menggunakan arahan v-slot untuk menentukan slot yang digunakan dalam komponen Pengesahan, serta nama slot (badan). Dalam komponen induk, kami mentakrifkan kaedah pembatalan dan kaedah pengesahan untuk mengendalikan operasi pembatalan dan pengesahan, dan menggesa pengguna bahawa pemadaman berjaya semasa operasi pengesahan.

Ringkasan

Melaksanakan lapisan pop timbul dan kotak modal dalam Vue memerlukan penggunaan komponen dan slot dinamik. Dengan menggunakan komponen sebagai lapisan pop timbul atau kotak modal, kami boleh melaksanakan komponen UI biasa ini dengan mudah. Pada masa yang sama, dengan menghantar fungsi panggil balik kepada komponen kanak-kanak, kami boleh mengendalikan operasi pengguna dalam komponen kanak-kanak dengan mudah dan menyuapkan hasil kembali kepada komponen induk.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lapisan pop timbul dan kotak modal dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!