示例简介
本实例介绍利用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>
