modal-模态框

Modal.vue

模态框独立封装成组件，引用时再插入数据

<template>
    <transition name="slide">
        <div class="modal" v-show="showModal">
            <!-- 遮罩层 -->
            <div class="mask"></div>  
            <!-- 弹框 -->
            <div class="modal-dialog">
                <!-- 弹框头部 -->
                <div class="modal-header">
                    <span>{{title}}</span>
                    <!-- 头部右上角关闭按钮 -->
                    <a href="javascript:;" class="icon-close" @click="$emit('cancel')"></a>
                </div>
                <!-- 中部用插槽设置为动态信息区，便于复用 -->
                <div class="modal-body">
                    <slot name="body">标题</slot>
                </div>
                <!-- 弹框底部 -->
                <div class="modal-footer">
                    <a href="javascript:;" class="btn" v-if="btnType==1" @click="$emit('submit')">{{sureText}}</a>
                    <a href="javascript:;" class="btn" v-if="btnType==2" @click="$emit('cancel')">{{cancelText}}</a>
                    <div class="btn-group" v-if="btnType==3">
                        <a href="javascript:;" class="btn" @click="$emit('submit')">{{sureText}}</a>
                        <a href="javascript:;" class="btn btn-default" @click="$emit('cancel')">{{cancelText}}</a>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
    export default {
        name: 'modal',
        // 变量
        props: {
            //弹框尺寸大小,小中大，默认是form表单
            modalType: {
                type: String,   //指定数据类型
                default: 'form',
            },
            //弹框标题
            title: String,
            //按钮类型,确定取消按钮
            btnType: String,
            // 确定按钮
            sureText: {
                type: String,
                default: '确定'
            },
            // 取消按钮
            cancelText: {
                type: String,
                default: '取消'
            },
            // 控制动画
            showModal: {
                type: Boolean
            }
        }
    }
</script>

<style lang="scss">
// 全局引用
    @import './../assets/scss/mixin.scss';
    @import './../assets/scss/config.scss';
    @import './../assets/scss/modal.scss';
</style>

modal.scss

.modal {
    @include position(fixed);   //fixed固定定位，相对于浏览器
    z-index: 10;   //调高堆叠顺序
    transition: all .5s;
    &.slide-enter-active{
        top: 0;
    }
    &.slide-leave-active{
        top: -100%;
    }
    &.slide-enter{
        top: -100%;
    }
    // 遮罩
    .mask{
        @include position(fixed);
        background-color: $colorI;
        opacity: 0.5;               //遮罩层透明度
    }
    // 弹框
    .modal-dialog{
        // 弹框位置无论什么时候都保持居中偏上,即设置top:40%,left50%
        @include position(absolute,40%,50%,660px,auto);
        background-color: #ffffff;
        transform: translate(-50%,-50%);    //往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置
        .modal-header{
            font-size: 16px;
            background-color: #f5f5f5;
            padding: 0 25px;
            height: 60px;
            line-height: 60px;   //行高与元素相等则元素居中显示
            // 右上角关闭图标用绝对定位固定
            .icon-close{
                @include positionImg(absolute,23px,25px,14px,14px,'/imgs/icon-close.png');
                // 给transform加一个动画过渡效果
                transition: transform .3s;  
                // 关闭图标的动画效果 
                &:hover{
                    transform: scale(1.5);  //鼠标移上去的时候放大1.5倍
                }
            }
        }
        .modal-body{
            padding: 42px 42px 54px;
            font-size: 14px;
        }
        .modal-footer{
            height: 82px;
            line-height: 82px;
            background-color: #f5f5f5;
            text-align: center;
        }
    }
}

具体使用

    <!-- 从此处往modal里传参,确定该页面的具体弹框信息 -->
    <modal
      title="友情提示"
      btnType="1"
      sureText="查看购物车"
      modalType="middle"
      :showModal="showModal"
      @submit="gotoCart"
      @cancel="showModal=false"
    >
    <!-- 插槽数据要用template包裹 -->
      <template v-slot:body>
        <p>商品添加成功！</p>
      </template>
    </modal>
  </div>
</template>