Implementieren Sie eine modale Box in Vue (allgemeine Schreibmethode).

Jetzt werde ich Ihnen eine allgemeine Schreibempfehlung für die Implementierung modaler Boxen in Vue geben. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Nachdem ich mir den Quellcode der Elementkomponente angesehen hatte, stellte ich fest, dass alle modalen Boxen tatsächlich auf ähnliche Weise implementiert wurden, wobei hauptsächlich die bidirektionale Bindung von Vue bei der Komponentisierung verwendet wurde. Code:

<!--查看槽点对话框-->
<template lang="html">
 <transition name="el-fade-in-linear">
  <p draggable="true" @drag="mouseDrag" @dragend="mouseDragend" :style="dialogStyle" class="g-dialog-wrapper" v-show="myVisible">
   <p class="g-dialog-header">
    <p class="left">
     模态框
    </p>
    <p class="right">
     <i class="g-times-icon fa fa-times" @click="myVisible=false" aria-hidden="true"></i>
    </p>
   </p>
   <p class="g-dialog-container">
   </p>
  </p>
 </transition>
</template>
<script>
 export default {
  props: {
   visible: Boolean
  },
  created() {
  },
  data() {
   return {
    myVisible: this.visible,
  },
  computed: {},
  methods: {
  },
  components: {},
  watch: {
   myVisible: function (val) {
    this.$emit(&#39;update:visible&#39;, val)
   },
   visible: function (val) {
    this.myVisible = val
   }
  }
 }
</script>
<style lang="css" scoped>
</style>

Der Hauptteil des obigen Codes ist der Code in watch, um Datenänderungen zu überwachen und rechtzeitig zu aktualisieren. Daher ist es sehr praktisch, es nach der Registrierung der Komponente in der Komponente zu verwenden:

<g-key-dialog :visible.sync="keyDialogVisible"></g-key-dialog>

Hinweis: Hier muss die Synchronisierung verwendet werden, sonst kann es nicht in zwei Richtungen gebunden werden

Ich habe es oben für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Lösung des Problems der Vue-Seitenaktualisierung oder des Verlusts von Back-Parametern

Instanzen der Ausführung von Funktionen nach dem Verlassen des Vue Seite

Verwendung des Vue-Karussell-Plug-Ins Vue-Concise-Slider

Das obige ist der detaillierte Inhalt vonImplementieren Sie eine modale Box in Vue (allgemeine Schreibmethode).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!