vue定义模态框的方法_vue.js_

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

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