vue定义模态框的方法
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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.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;
}
}
}自定义模态框弹出框的大小位置及动画
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341