在看了element組件的源碼后發現，所有模態框其實實現方法都差不多，主要用到了vue在組件化上的雙向綁定。代碼：

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

上面代碼主要的部分是watch里面的代碼，實現監聽數據變化，及時更新。所以在使用的時候就很方便了，在component注冊組件之后：

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

注：這里必須使用sync，要不是無法雙向綁定的

以上這篇vue實現模態框的通用寫法推薦就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。