Implémenter la boîte modale dans vue (méthode d'écriture générale)

Je vais maintenant partager avec vous une recommandation générale de rédaction pour implémenter des boîtes modales dans Vue. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Après avoir examiné le code source du composant element, j'ai découvert que toutes les boîtes modales sont en fait implémentées de manière similaire, principalement en utilisant la liaison bidirectionnelle de Vue dans la composantisation. 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>

La partie principale du code ci-dessus est le code en montre pour surveiller les changements de données et les mettre à jour à temps. Il est donc très pratique de l'utiliser. Après avoir enregistré le composant dans le composant :

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

Remarque : la synchronisation doit être utilisée ici, sinon la liaison bidirectionnelle n'est pas possible

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Résoudre le problème de rafraîchissement de la page de vue ou de perte des paramètres arrière

Instances d'exécution de fonctions après avoir quitté la vue page

Utilisation du plug-in vue carrousel vue-concise-slider

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!