vue定义模态框的方法

本文实例为大家分享了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" v-on: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" v-on:click="$emit('submit')">{{sureText}}</a>
          <a href="javascript:;" class="btn" v-if="btnType===2" v-on:click="$emit('cancel')">{{cancelText}}</a>
          <div class="btn-group" v-if="btnType===3">
            <a href="javascript:;" class="btn" v-if="btnType===1" v-on:click="$emit('submit')">{{sureText}}</a>
            <a href="javascript:;" class="btn" v-if="btnType===2" v-on:click="$emit('cancel')">{{cancelText}}</a>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'modal',
  props: {
    // 弹窗类型  小small 中middle 打large 表单form
    modalType: {
      type: String,
      default: 'form'
    },
    title: String,
    // 按钮类型1确定 2取消 3确定取消
    btnType: String,
    sureText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    showModal: Boolean
  }
}
</script>
<style lang="scss">
@import '../assets/scss/config.scss';
@import '../assets/scss/modal.scss';
@import '../assets/scss/mixin.scss';
</style>

modal.scss

@import './mixin.scss';
.modal {
  @include position(fixed);
  z-index: 30;
  transition: all .5s;
  .mask {
    @include position(fixed);
    background-color: $colorI;
    opacity: 0.5;
  }
  &.slide-enter-active {
    top: 0;
  }
  &.slide-leave-active {
    top: -100%;
  }
  &.slide-enter {
    top: -100%;
  }
  .modal-dialog {
    @include position(absolute,40%,50%,660px,auto);
    background-color: $colorG;
    transform: translate(-50%,-50%);
    .modal-header {
      height: 60px;
      background-color: $colorJ;
      padding: 0 25px;
      line-height: 60px;
      font-size: $fontI;
      .icon-close {
        @include positionImg(absolute,23px,25px,14px,14px,'/imgs/icon-close.webp');
        transition: transform .3s;
        &:hover {
          transform: scale(1.5);
        }
      }
    }
    .modal-body {
      padding: 42px 40px 54px;
      font-size: 14px;
    }
    .modal-footer {
      height: 82px;
      line-height: 82px;
      text-align: center;
      background-color: $colorJ;
    }
  }
}

@mixin flex($hov:space-between, $col: center) {
  display: flex;
  justify-content: $hov;
  align-items: $col;
}
@mixin bgImg($w:0, $h:0, $img:'', $size:contain) {
  display: inline-block;
  width: $w;
  height: $h;
  background: url($img) no-repeat center;
  background-size: $size;
}
@mixin positionImg($pos:absolute,$top:0,$right:0,$w:0, $h:0, $img:'', $size:contain) {
  position: $pos;
  top: $top;
  right: $right;
  width: $w;
  height: $h;
  background: url($img) no-repeat center;
  background-size: $size;
}
@mixin position($pos:absolute,$top:0,$left:0,$w:100%,$h:100%) {
  position: $pos;
  top: $top;
  left: $left;
  width: $w;
  height: $h;
}

要引用的

<modal
      title="提示"
      sureText="查看购物车"
      :btnType="1"
      modalType="middle"
      v-bind:showModal="showModal"
      v-on:submit="goToCart"
      v-on:cancel="showModal=false"
    >
    <template v-slot:body>
      <p>商品添加成功！</p>
    </template>
    </modal>
data() {
    return {
        isModal:false
    }
}

button.scss

@import './config.scss';
.btn {
  display: inline-block;
  width: 110px;
  line-height: 30px;
  text-align: center;
  background-color: $colorA;
  color: $colorG;
  border: none;
  cursor: pointer;
}
.btn-default {
  background-color: #b0b0b0;
  color: $colorG;
}
.btn-large {
  width: 202px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
}
.btn-huge {
  width: 300px;
  height: 54px;
  line-height: 54px;
  font-size: 18px;
}
.btn-group {
  .btn {
    margin-right: 20px;
    &:last-child {
      margin-right: 0;
    }
  }
}

自定义模态框弹出框的大小位置及动画