示例简介

本实例介绍利用Vue实现弹窗组件，弹窗界面显示样式可根据父组件任意调整；

最终效果：

 

实现过程

一、子组件代码如下（popup.vue），原理分析：

1、显示和隐藏弹窗时，使用transition的动画效果，从顶部往下移动显示，往顶部移动隐藏；

2、弹窗的显示和隐藏都是由父组件通过props向子组件传递数据（isShow）来控制；点击关闭和遮罩层会通过$emit给父组件发送消息（on-close）更改isShow数据。

<template>
  <div class="popup-box">
    <div class="popup-mask" v-if="isShow" @click="closePopup"></div>
    <transition name="popup-drop">
      <div class="popup-content" v-if="isShow">
        <div class="popup-close" @click="closePopup"><img src="../assets/images/slide/close.png" alt="" /></div>
        <slot>空数据</slot>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    closePopup () {
      this.$emit('on-close');
    }
  }
}
</script>
<style lang="less" scoped>
.popup-box {
  .popup-mask {
    background-color: #000;
    opacity: 0.3;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }


  .popup-content {
    position: fixed;
    width: 50%;
    max-height: 50%;
    overflow: auto;
    background-color: #fff;
    top: 30%;
    left: 50%;
    margin-left: -25%;
    z-index: 100;
    box-shadow: 7px 7px 10px 0 rgba(76, 110, 245, .1);
    border-radius: 5px;
    padding: 30px;


    .popup-close {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 20px;
      height: 20px;
      text-align: center;
      cursor: pointer;
      img {
        width: 100%;
      }
      &:hover {
        img {
          transform: scale(1.5, 1.5);
        }
      }
    }
  }
}


/* 弹窗动画 */
.popup-drop-enter-active {
  transition: all 0.5s ease;
}


.popup-drop-leave-active {
  transition: all .3s ease;
  transform: translateY(-500px);
}


.popup-drop-enter {
  transform: translateY(-500px);
}
</style>

二、父组件代码如下（popupPage.vue），原理分析：

主要用来传数据（isShow）给子组件，并编写界面样式替换slot。

<template>
  <div>
    <button @click="showPopup">点击显示弹窗</button>
    <popup :isShow="isShow" @on-close="closePopup">
      <div class="login-title">欢迎登录</div>
      <div class="login-box">
        <div class="line"><label for="username">用户名：</label><input type="text" v-model="username" name="username" id="username" placeholder="请输入用户名" /></div>
        <div class="line"><label for="password">密码：</label><input type="password" v-model="password" name="password" id="password" placeholder="请输入密码" /></div>
        <a href="javascript:;" class="login-button" @click="clickLogin">登 录</a>
      </div>
    </popup>
  </div>
</template>
<script> import Popup from '../components/popup' export default { components: { Popup }, data() { return { isShow: false, username: '', password: '' } }, methods: { showPopup() { this.isShow = true; }, closePopup() { this.isShow = false; }, clickLogin () { console.log(this.username, this.password); } } } </script>
<style lang="less" scoped>
.login-title {
  text-align: center;
  font-size: 20px;
}


.login-box {
  margin-top: 30px;
  padding: 0 20px;


  .line {
    display: flex;
    margin-bottom: 30px;


    label {
      width: 60px;
      text-align: right;
      margin-right: 10px;
      vertical-align: middle;
      margin-top: 6px;
    }


    input {
      flex: 1;
      padding: 8px 5px;
    }
  }


  .login-button {
    margin-top: 10px;
    float: right;
    display: inline-block;
    color: #fff;
    background-color: #419efe;
    text-align: center;
    height: 38px;
    line-height: 38px;
    width: 80px;
    border-radius: 5px;
  }
}
</style>