老铁电影网,9大常委,上海市长杨雄背后是谁
效果如下,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的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论