vue定义模态框的方法

本文实例为大家分享了vue定义模态框的具体代码，供大家参考，具体内容如下

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.png');
        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;
}

要引用的

    
    
 
 
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;
    }
  }
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。