vue中如何实现弹框dialog

这篇文章主要为大家展示了“vue中如何实现弹框dialog”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中如何实现弹框dialog”这篇文章吧。

效果如下，dialog中内容自行添加

<template>  <div>  <div class="dialog-wrap">   <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div>   <transition name="drop">   <div class="dialog-content" v-if="isShow">    <p class="dialog-close" @click="closeMyself">x</p>    <slot>empty</slot>   </div>   </transition>  </div>  </div> </template>

接收父组件传参isShow，并返回一个自定义事件on-close

<script>  export default {  props: {   isShow: {   type: Boolean,   default: false   }  },  data () {   return {   }  },  methods: {   closeMyself () {   this.$emit('on-close')   }  }  } </script>

<style scoped>  .drop-enter-active {  transition: all .5s ease;  }  .drop-leave-active {  transition: all .3s ease;  }  .drop-enter {  transform: translateY(-500px);  }  .drop-leave-active {  transform: translateY(-500px);  }  .dialog-wrap {  position: fixed;  width: 100%;  height: 100%;  }  .dialog-cover {  background: #000;  opacity: .3;  position: fixed;  z-index: 5;  top: 0;  left: 0;  width: 100%;  height: 100%;  }  .dialog-content {  width: 50%;  position: fixed;  max-height: 50%;  overflow: auto;  background: #fff;  top: 20%;  left: 50%;  margin-left: -25%;  z-index: 10;  border: 2px solid #464068;  padding: 2%;  line-height: 1.6;  }  .dialog-close {  position: absolute;  right: 5px;  top: 5px;  width: 20px;  height: 20px;  text-align: center;  cursor: pointer;  }  .dialog-close:hover {  color: #4fc08d;  } </style>

以上是“vue中如何实现弹框dialog”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！