Cara mengawal fungsi tetingkap pop timbul yang berbeza di bawah keadaan yang berbeza dalam Vue

Vue ialah rangka kerja JavaScript popular yang menyediakan pembangun dengan banyak alatan yang mudah dan pantas, membolehkan kami membangunkan aplikasi web berkualiti tinggi dengan lebih cepat. Antaranya, tetingkap pop timbul adalah komponen biasa dalam aplikasi web. Dalam Vue, kami boleh mengawal tetingkap timbul yang berbeza melalui keadaan yang berbeza dan mencapai pengalaman pengguna yang lebih baik.

Kotak modal Vue

Kotak modal Vue dikawal melalui arahan v-if. Dalam Vue, kita boleh mengawal paparan dan menyembunyikan kotak modal dengan mudah melalui arahan v-if. Ambil kotak modal pada halaman sebagai contoh Templatnya adalah seperti berikut:

<template>
  <div>
    <button @click="showModal = true">弹出模态框</button>
    <div v-if="showModal" class="modal">
      <!-- Modal内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

Dalam kod di atas, kami menggunakan pembolehubah showModal untuk mengawal paparan dan penyembunyian kotak modal. Apabila kita mengklik butang butang, nilai pembolehubah showModal akan berubah kepada benar, sekali gus memaparkan kotak modal. Apabila kita mengklik butang tutup, peristiwa akan dicetuskan untuk menukar nilai pembolehubah showModal kepada palsu, sekali gus menyembunyikan kotak modal.

Keadaan yang berbeza mengawal tetingkap timbul yang berbeza

Dalam pembangunan sebenar, kami mungkin memerlukan berbilang tetingkap timbul yang berbeza dan keadaan tetingkap timbul ini juga mungkin berbeza. Kita boleh mencapai keperluan ini melalui sifat dan kaedah yang dikira Vue. Berikut ialah contoh:

<template>
  <div>
    <!-- 显示第一个弹窗的按钮 -->
    <button @click="showModal1 = true">显示第一个弹窗</button>
    <!-- 显示第二个弹窗的按钮 -->
    <button @click="showModal2 = true">显示第二个弹窗</button>

    <!-- 第一个弹窗的HTML结构 -->
    <div v-if="showModal1" class="modal">
      <!-- Modal内容 -->
      <button @click="closeModal1">关闭</button>
    </div>

    <!-- 第二个弹窗的HTML结构 -->
    <div v-if="showModal2" class="modal">
      <!-- Modal内容 -->
      <button @click="closeModal2">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal1: false,
      showModal2: false
    };
  },
  computed: {
    //计算属性showModal可以根据条件控制不同的弹窗
    showModal() {
      if (this.showModal1) {
        return this.showModal1;
      } else if (this.showModal2) {
        return this.showModal2;
      } else {
        return false;
      }
    }
  },
  methods: {
    closeModal1() {
      //关闭第一个弹窗
      this.showModal1 = false;
    },
    closeModal2() {
      //关闭第二个弹窗
      this.showModal2 = false;
    }
  }
};
</script>

Dalam kod di atas, kami mentakrifkan dua pembolehubah jenis Boolean showModal1 dan showModal2, yang masing-masing mewakili status paparan bagi tetingkap timbul pertama dan kedua. Kami menggunakan arahan v-if untuk mengawal paparan dan penyembunyian kedua-dua tetingkap pop timbul ini. Dalam atribut yang dikira, kami mentakrifkan pembolehubah showModal untuk menentukan tetingkap timbul untuk dipaparkan berdasarkan nilai showModal1 dan showModal2. Akhir sekali, dalam kaedah kaedah, kami mentakrifkan fungsi untuk menutup tetingkap pop timbul yang berbeza.

Perlu diambil perhatian bahawa dalam aplikasi, mungkin terdapat berbilang tetingkap timbul dengan syarat yang berbeza Dalam kes ini, kita boleh menggunakan kaedah kes suis yang serupa untuk menentukan tetingkap timbul yang perlu dipaparkan dalam keadaan yang berbeza. Pada masa yang sama, memandangkan setiap tetingkap timbul ialah komponen bebas, kami boleh mengekstrak komponen tetingkap timbul untuk menjadikan kod lebih ringkas.

Ringkasan

Tetingkap pop timbul Vue ialah komponen yang sangat biasa digunakan dan penting. Dengan mempelajari arahan v-if dan sifat terkira Vue, kami boleh melaksanakan fungsi mengawal tetingkap timbul yang berbeza secara bersyarat. Dalam pembangunan sebenar, kami perlu mereka bentuk dan melaksanakan tetingkap pop timbul yang berbeza mengikut keperluan untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Cara mengawal fungsi tetingkap pop timbul yang berbeza di bawah keadaan yang berbeza dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!