快捷導(dǎo)航

vue定義模態(tài)框的方法

更新時間：2022年07月05日 09:52:24 作者：xiaodunmeng

這篇文章主要為大家詳細介紹了vue定義模態(tài)框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue定義模態(tài)框的具體代碼，供大家參考，具體內(nèi)容如下

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

要引用的

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

自定義模態(tài)框彈出框的大小位置及動畫

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: