After looking at the source code of the element component, I found that all modal boxes actually have the same implementation methods, mainly using two-way binding of vue on componentization. Code:
<!--View Slots Dialog-->
<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">
Modal Box
</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: ,
},
computed: {},
methods: {
},
components: {},
watch: {
myVisible: function (val) {
this.$emit('update:visible', val)
},
visible: function (val) {
= val
}
}
}
</script>
<style lang="css" scoped>
</style>
The main part of the above code is the code in the watch, which can monitor data changes and update it in time. So it is very convenient when using it. After registering the component:
<g-key-dialog :="keyDialogVisible"></g-key-dialog>
Note: sync must be used here, if it is not impossible to bind two-way
The above general writing method of Vue implementation modal box is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.