Implement modal box in vue (general writing method)

Below I will share with you a general writing recommendation for Vue to implement modal boxes. It has a good reference value and I hope it will be helpful to everyone.

After looking at the source code of the element component, I found that all modal boxes are actually implemented in similar ways, mainly using Vue's two-way binding in componentization. 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>

The main part of the above code is the code in watch to monitor data changes and update in time. So it is very convenient to use it. After registering the component in the component:

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

Note: sync must be used here, otherwise it cannot be bound in two directions

above I compiled it for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Solve the problem of vue page refresh or loss of back parameters

Instances of executing functions after leaving the vue page

Usage of vue carousel plug-in vue-concise-slider

The above is the detailed content of Implement modal box in vue (general writing method). For more information, please follow other related articles on the PHP Chinese website!