vue 自定义弹窗插件


/* 
 *
 */

 <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>
sakila1012 / blog

vue 自定义弹窗插件 #24
