Kaedah pelaksanaan komponen tetingkap timbul dalam dokumen Vue

Vue ialah salah satu rangka kerja JavaScript yang paling popular, yang melaluinya aplikasi web dinamik boleh dilaksanakan. Dalam Vue, tetingkap pop timbul ialah salah satu komponen yang biasa digunakan, yang boleh digunakan untuk memaparkan amaran, gesaan kejayaan, mesej ralat, dsb. Vue memberikan kami beberapa kaedah untuk melaksanakan komponen pop timbul Artikel ini akan memperkenalkan beberapa daripadanya.

Kaedah 1: Gunakan komponen terbina dalam Vue.js

Vue.js disertakan dengan komponen, kotak modal (Modal), yang digunakan untuk mencapai kesan pop timbul . Pelaksanaan kotak modal memerlukan penggunaan beberapa arahan gaya Vue.js dan CSS.

Kami perlu memperkenalkan komponen ini terlebih dahulu ke dalam komponen Vue:

<template>
  <div>
    <!-- ... -->
    <modal v-if="showModal" @close="showModal = false">
      <!-- 弹窗内容 -->
    </modal>
    <!-- ... -->
  </div>
</template>

<script>
import Modal from 'vue-js-modal'

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

Dalam templat, kami mengelilingi komponen yang akan muncul dalam teg <modal> dan @closemendengar Komponen modal Untuk menutup acara, tetapkan pembolehubah showModal kepada false. Pada masa ini, anda boleh menutup komponen modal dengan mengklik pada kawasan kosong atau menekan kekunci esc.

Seterusnya, kita perlu menambah beberapa maklumat konfigurasi kotak modal dalam <script>:

Modal.config.defaultDialogConfirmText = '确定'
Modal.config.defaultDialogCancelText = '取消'
Modal.config.defaultDialogPromptTitle = '提示'
Modal.config.defaultDialogPromptPlaceholder = ''
Modal.config.defaultSnackbarDuration = 2000
Modal.config.defaultSpinnerType = 'circle'

Konfigurasi di atas boleh disesuaikan mengikut keperluan untuk mengawal paparan dan paparan kotak modal. bersembunyi.

Kaedah 2: Gunakan VueX untuk mengurus komponen pop timbul

VueX ialah pengurus negeri dalam Vue.js, yang boleh mengurus status data secara global. Dengan VueX, kami juga boleh mengurus komponen pop timbul.

Kami mentakrifkan keadaan global dalam Vuex untuk mengawal paparan dan menyembunyikan tetingkap timbul:

const state = {
  dialog: {
    visible: false,
    message: '',
    confirmLabel: '确定',
    cancelLabel: '取消',
    resolve: null,
    reject: null
  }
}

di mana dialog mengandungi beberapa maklumat tentang komponen tetingkap timbul, termasuk sama ada tetingkap timbul ialah Kelihatan, mesej pop timbul, label OK dan Batal, dsb. Apabila kita perlu memaparkan tetingkap pop timbul, kita boleh menukar status data dalam keadaan melalui mutasi:

const mutations = {
  showDialog(state, payload) {
    state.dialog = {
      visible: true,
      message: payload.message,
      confirmLabel: payload.confirmLabel || '确定',
      cancelLabel: payload.cancelLabel || '取消',
      resolve: payload.resolve,
      reject: payload.reject
    }
  },
  hideDialog(state, payload) {
    state.dialog.visible = false
    if (payload.resolve) {
      payload.resolve()
    }
  }
}

Dalam kod di atas, apabila melaksanakan showDialog, kami mengawal paparan dan gaya pop tetingkap -atas melalui parameter yang diluluskan . Apabila melaksanakan hideDialog, kami menutup tetingkap pop timbul dan melaksanakan fungsi panggil balik berdasarkan parameter yang diluluskan.

Kaedah 3: Laksanakan komponen pop timbul secara berasingan

Selain daripada dua kaedah di atas, kami juga boleh melaksanakan komponen pop timbul secara berasingan. Mula-mula, kita perlu mentakrifkan templat komponen pop timbul dalam komponen Vue:

<template>
  <div class="popup" v-show="visible"> 
    <div class="mask"></div> 
    <div class="dialog"> 
      <slot name="header"></slot>
      <div class="content"> 
        <slot></slot>
      </div> 
      <div class="footer" v-show="showFooter"> 
        <button class="btn btn-primary" @click="ok" v-text="okText || '确定'"></button>
        <button class="btn btn-default" @click="cancel" v-text="cancelText || '取消'"></button>
      </div> 
    </div> 
  </div>
</template>

Dalam kod di atas, kami menggunakan <slot></slot> dan <slot name="header"></slot> untuk menghantar kandungan dan tajuk pop timbul, dan kami juga boleh menambahnya seperti yang diperlukan butang Pop timbul.

Seterusnya, kita perlu menentukan beberapa sifat dan kaedah komponen pop timbul dalam <script>:

<template>
  <div class="popup" v-show="visible"> 
    <div class="mask"></div> 
    <div class="dialog"> 
      <slot name="header"></slot> 
      <div class="content"> 
        <slot></slot> 
      </div> 
      <div class="footer" v-show="showFooter"> 
        <button class="btn btn-primary" @click="ok" v-text="okText || '确定'"></button>
        <button class="btn btn-default" @click="cancel" v-text="cancelText || '取消'"></button>
      </div> 
    </div> 
  </div>
</template>

<script>
export default {
  name: 'Popup',
  props: {
    visible: Boolean, //控制弹窗是否可见
    okText: String, //确定按钮文本
    cancelText: String, //取消按钮文本
    showFooter: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    ok() {
      this.$emit('ok')
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

Kita boleh menggunakan v-bind dan v-on untuk menetapkan sifat dan kaedah daripada komponen, Dan perkenalkan komponen ke dalam komponen yang perlu menggunakan tetingkap timbul, dan kemudian panggil komponen tetingkap timbul dengan menghantar parameter yang berbeza.

Ringkasan:

Dalam Vue.js, terdapat banyak cara untuk melaksanakan komponen pop timbul. Anda boleh melaksanakan tetingkap pop timbul dengan cepat menggunakan komponen kotak modal yang disertakan dengan Vue.js Anda boleh menggunakan VueX untuk mengawal secara global status komponen tetingkap timbul Dengan melaksanakan komponen tetingkap timbul secara berasingan, anda boleh menyesuaikan gaya dan fungsi komponen tetingkap pop timbul mengikut keperluan. Adalah perlu untuk memilih kaedah yang sesuai untuk pembangunan berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci Kaedah pelaksanaan komponen tetingkap timbul dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!