Open sakila1012 opened 6 years ago
/* * */ <template> <div class="dialog"> <!--外层的遮罩--> <div class="dialog-cover back" v-if="isShow" @click="closeMyself"></div> <!--transition 这里可以添加一些简单的动画效果--> <transition name="drop"> <!--style 通过props 控制内容的样式--> <div class="dialog-content" :style="{top:topDistance + '%',width:widNum + '%',left:leftSize + '%'}" v-if="isShow"> <div class="dialog_head back"> <!--弹窗头部 title--> <slot name="header">提示信息</slot> </div> <div class="dialog_main" :style="{paddingTop:pdt + 'px',paddingBottom:pdb + 'px'}"> <!--弹窗的内容--> <slot name="main">弹窗内容</slot> </div> <!--弹窗关闭按钮--> <div class="foot_close" @click="closeMyself"> <div class="close_img back"></div> </div> </div> </transition> </div> </template> <script> export default { name: "dialog", props: { isShow: { type: Boolean, default: false, required: true }, widNum: { type: Number, default: 86.5 }, leftSite: { // 左定位 type: Number, default: 6.5 }, topDistance: { // top上边距 type: Number, default: 35 }, pdt: { // 上padding type: Number, default: 22 }, pdb: { type: Number, default: 47 }, methods: { closeMyself() { this.$emit("on-close"); } } } } </script> <style lang="scss" scoped> .drop-enter-active { // 动画进入过程 transition: all 0.5s ease; } .drop-leave-active { transition: all 0.3s ease; } .drop-enter { transform: translateY(-500px); } .drop-leave-active { transform: transformY(-500px); } // 最外层 设置 position 定位 .dialog { position: relative; color: #2e2c2d; font-size: 16px; } .dialog-cover { background: regba(0, 0, 0, 0.8); position: fixed; z-index: 200; top: 0; left: 0; width: 100%; height: 100%; } .dialog-content { position: fixed; top: 35%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 300; .dialog_head { // 头部 title 的背景 居中圆角等属性 background-image: url("../../static/gulpMin/image/dialog/dialog_head.png"); height: 86.5%; width: 43px; display: flex; justify-content: center; align-items: center; border-top-left-radius: 10px; border-top-right-radius: 10px; } .dialog_main { // 主体内容样式设置 background: #fff; display: flex; justify-content: center; align-content: center; width: 86.5%; padding: 22px 0 47px 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .foot_close { width: 50px; height: 50px; border-radius: 50%; background: #fcca03; display: flex; justify-content: center; align-content: center; margin-top: -25px; .close_img { background-image: url("../../static/gulpMin/image/dialog/dialog_close.png") width: 42px; height: 42px; } } } </style>