如何将Vue中定义模态框的方法改写为长尾关键词？

本文共计793个文字，预计阅读时间需要4分钟。

原文：本文字例为大师分享了Vue定义模板模型的整体代码，供大师参考，具体内容如下：

改写后：Vue模板中定义了名为slide的过渡效果，用于显示模态框。模态框包含一个遮罩层和一个对话框，对话框顶部为模态头部。

本文实例为大家分享了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;     }   } }

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

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