vue中简单弹框dialog的实现方法

前端之家收集整理的这篇文章主要介绍了vue中简单弹框dialog的实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

empty@H_502_12@

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

export default { props: { isShow: { type: Boolean,default: false } },data () { return { } },methods: { closeMyself () { this.$emit('on-close') } } }
.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; }

以上这篇vue中简单弹框dialog的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

猜你在找的Vue相关文章