Bagaimana untuk melaksanakan kotak dialog dan kotak modal dalam Vue?

Bagaimana untuk melaksanakan kotak dialog dan kotak modal dalam Vue?

Dengan pembangunan berterusan dan pengemaskinian teknologi bahagian hadapan, pembangunan muka surat hadapan telah menjadi lebih kompleks dan pelbagai. Kotak dialog dan kotak modal ialah elemen yang sering muncul di halaman hadapan dan boleh membantu kami mencapai kesan interaktif yang lebih fleksibel dan pelbagai. Dalam Vue, terdapat banyak cara untuk melaksanakan kotak dialog dan kotak modal Artikel ini akan memperkenalkan anda kepada beberapa kaedah pelaksanaan biasa.

1. Gunakan komponen Vue sendiri

Vue.js menyediakan beberapa komponen terbina dalam, seperti peralihan dan kumpulan peralihan. Kita boleh menggunakan komponen ini untuk melaksanakan kotak dialog dan kotak modal . Proses pelaksanaan khusus adalah seperti berikut:

1 Tambah templat kotak dialog dalam HTML:

<transition name="modal">
  <div class="modal-mask" v-if="showModal">
    <div class="modal-wrapper">
      <div class="modal-container">
        <h3>我是标题</h3>
        <div class="modal-body">
            这里是对话框的内容
        </div>
        <div class="modal-footer">
          <button class="modal-default-button" @click="showModal = false">
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</transition>

2 Tambah atribut dan kaedah data pada contoh Vue untuk mengawal penampilan dan penutupan kotak dialog:

data: {
  showModal: false
},
methods: {
  toggleModal: function(){
    this.showModal = !this.showModal;
  }
}

. 2. Gunakan komponen pihak ketiga

Selain komponen Vue sendiri, kami juga boleh menggunakan rangka kerja UI pihak ketiga untuk melaksanakan kotak dialog dan kotak modal. Kaedah ini boleh mengurangkan masa pembangunan dan jumlah kod rangka kerja UI yang biasa digunakan termasuk ElementUI, Vuetify, Bootstrap-Vue, dsb. Sebagai contoh, kod pelaksanaan untuk menggunakan kotak dialog dalam UI Elemen adalah seperti berikut:

1 Tambahkan templat kotak dialog dalam HTML:

<el-dialog :visible.sync="dialogVisible">
  <span slot="title">对话框标题</span>
  <div>这里是对话框的内容</div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary">确 定</el-button>
  </div>
</el-dialog>

2 Tambahkan atribut dan kaedah data pada contoh Vue untuk mengawal penampilan dan penutupan kotak dialog:

data() {
  return {
    dialogVisible: false
  }
}

3. Komponen dialog tulisan tangan

Jika kita tidak mahu menggunakan komponen UI pihak ketiga, kita juga boleh menulis komponen kotak dialog dan kotak modal, supaya kita boleh melaksanakannya sepenuhnya mengikut keperluan dan gaya kita sendiri. Proses pelaksanaan khusus komponen tulisan tangan adalah seperti berikut:

1 Cipta komponen kotak dialog:

<template>
  <div class="dialog-mask" v-if="value">
    <div class="dialog">
      <div class="dialog-header">
        <h3>{{title}}</h3>
        <span class="close-btn" @click="close()">X</span>
      </div>
      <div class="dialog-body">
        <slot name="content"></slot>
      </div>
      <div class="dialog-footer">
        <button class="confirm-btn" @click="confirm()">确定</button>
        <button class="cancel-btn" @click="close()">取消</button>
      </div>
    </div>
  </div>
</template>

2 Daftar komponen kotak dialog dalam contoh Vue, dan tentukan atribut dan kaedah data untuk mengawal penampilan dan penutupan kotak dialog:

Vue.component('dialog-box', {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '对话框标题'
    }
  },
  methods: {
    close(){
      this.$emit('input', false);
    },
    confirm(){
      this.$emit('confirm');
      this.$emit('input', false);
    }
  }
})

Akhir sekali, apabila menggunakan komponen dialog, anda boleh menggunakan model v untuk mengikat data dalam dua arah, dan menukar data terikat apabila anda perlu memunculkan kotak dialog.

Ringkasan

Tiga kaedah di atas adalah kaedah yang agak biasa untuk melaksanakan kotak dialog dan kotak modal. Menggunakan komponen Vue sendiri boleh mengurangkan jumlah kod yang kami gunakan Menggunakan rangka kerja UI pihak ketiga boleh meningkatkan kecekapan pembangunan dan mencantikkan gaya halaman boleh dilaksanakan sepenuhnya mengikut keperluan dan gaya anda sendiri. Dalam pembangunan sebenar, kita perlu memilih kaedah pelaksanaan yang paling sesuai dengan kita berdasarkan keperluan sebenar.

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