vue项目中自己写popup弹窗功能-心得-案例

淩亂°似流年 2022-09-02 08:28 79阅读 0赞

# 效果图 #

![20210802173548643.gif][]

> 上图展示有两种方式（**以下代码演示只粘贴主要样式和逻辑代码**）
> 
> 方式一：是通过组件卸载的方式
> 
> 方式二：是通过弹窗内部控制显示和隐藏

# 主要公共样式代码 #

// 弹窗
    .popup-mask {
    	position: fixed;
    	top: 0;
    	left: 0;
    	bottom: 0;
    	right: 0;
    	z-index: 50001;
    	background: rgba(0, 0, 0, 0.5);
    
    	.popup-content {
    		// position: fixed;
    		position: absolute;
    		width: 50%;
    		// min-height: 240px;
    		left: 50%;
    		top: 50%;
    		transform: translate(-50%, -50%);
    		// box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    		// border-radius: 5px;
    		box-sizing: border-box;
    		background: #fff;
    		// opacity: 1;
    		overflow: hidden;
    		z-index: 50002;
    		.header{
    			height: 60px;
    			position: relative;
    			background-color: #F9F9F9;
    			border-bottom: 1px solid #627D93;
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			.title{
    				font-size: 24px;
    				font-family: Microsoft YaHei;
    				font-weight: bold;
    				color: #2E516F;
    			}
    			img{
    				position: absolute;
    				top: 6px;
    				right: 20px;
    				width: 48px;
    				height: 48px;
    			}
    			&::after{
    				content: "";
    				width: 10px;
    				height: 10px;
    				background: rgba(0, 0, 0, 0.5);
    				position: absolute;
    				top: -1px;
    				left: -1px;
    			}
    			&::before{
    				content: "";
    				width: 10px;
    				height: 10px;
    				background: rgba(0, 0, 0, 0.5);
    				position: absolute;
    				top: -1px;
    				right: -1px;
    			}
    		}
    		.content{
    			padding: 50px 50px 20px;
    			min-height: 156px;
    			background-color: #fff;
    		}
    		.footer{
    			display: flex;
    			align-items: center;
    			justify-content: space-around;
    			height: 120px;
    			border-top: 1px solid #627D93;
    			background-color: #F9F9F9;
    			&.button{
    				a{
    					width: 200px;
    					height: 50px;
    				}
    			}
    		}
    		&.s{
    			width:  470px;
    		}
    		&.m{
    			width: 674px;
    		}
    		&.l{
    			width: 1088px;
    		}
    	}
    }
    
    /* 设置持续时间和动画函数 */
    .popup-enter-active,
    .popup-leave-active {
    	transition: opacity 0.5s linear;
    }
    
    .popup-enter,
    .popup-leave-to {
    	opacity: 0;
    }

# 方式一 #

> 优点：通过组件卸载方式，可以达到清空组件内数据（还原data中定义的数据项）

## 定义popup弹窗组件 ##

<template>
      <transition name="popup">
        <div class="popup-mask" v-if="show_info_box" @click.self="closeInfoPopup">
          
          <div class="popup-content s" v-if="isShowPopup == 0">
            <div class="header">
              <span class="title">提示</span>
              <span class="close" @click="closeInfoPopup">X</span>
            </div>
            <div class="content">提示内容</div>
            <div class="footer button">
              <a class="btn_infoqr_m_r_p">确认</a>
              <a class="btn_infoqx_m_r_t" @click="closeInfoPopup">取消</a>
            </div>
          </div>
        </div>
      </transition>
    </template>
    
    <script>
    export default {
      props: {
        setDataDetail: {
          type: Object,
          required: true,
          //   default: function () {
          //     return {
          //       id: "1",
          //       name: "dyh",
          //       show_type: 1,
          //     };
          //   },
        },
      },
      data() {
        return {
          //弹窗状态 0 提示
          isShowPopup: 0,
          show_info_box: !false,
        };
      },
      watch: {},
      created() {},
      mounted() {
    
      },
      methods: {
        // 关闭弹窗
        closeInfoPopup() {
          this.$bus.$emit('popupUse',0);
        },
      },
      beforeDestroy() {
        console.log("页面卸载popup");
      },
    };
    </script>

## 页面内使用 ##

> **重点：**
> 
> **主要通过v-if="show\_info\_box"控制组件的卸载和安装**

<template>
      <div class="about">
        <h1>可以卸载的弹窗</h1>
        <button @click="showPopup()">弹窗</button>
        <transition name="popup">
          <Popup3 v-if="show_info_box" :setDataDetail="setDataDetail" />
        </transition>
      </div>
    </template>
    <script>
    import Popup3 from "@/components/Popup3";
    export default {
      name: "Popupuse",
      components: {
        Popup3,
      },
      data() {
        return {
          show_info_box: false,
          setDataDetail: {},
        };
      },
      computed: {},
      mounted() {
        this.$bus.$on("popupUse", () => {
          this.showPopup();
        });
      },
      methods: {
        // 弹窗显示/隐藏
        showPopup() {
          this.show_info_box = !this.show_info_box;
        },
      },
      beforeDestroy() {
        this.$bus.$off(["popupUse"]);
        console.log("popupuse卸载了");
      },
    };
    </script>

> 提示：上面重复的内容可以使用vue混入简化，为了好理解，我就不简化了

# 方式二 #

## 定义popup弹窗组件 ##

> 组件内通过v-if关闭弹窗，不能将组件卸载，导致组件内会残留数据，影响下次使用
> 
> 可以通过关闭组件时手动重置data中数据项实现

<template>
      <transition name="popup">
        <div class="popup-mask" v-if="show_info_box" @click.self="closeInfoPopup">
          
          <div class="popup-content s" v-if="isShowPopup == 0">
            <div class="header">
              <span class="title">提示</span>
              <span class="close" @click="closeInfoPopup">X</span>
            </div>
            <div class="content">提示内容</div>
            <div class="footer button">
              <a class="btn_infoqr_m_r_p">确认</a>
              <a class="btn_infoqx_m_r_t" @click="closeInfoPopup">取消</a>
            </div>
          </div>
        </div>
      </transition>
    </template>
    
    <script>
    export default {
      props: {
        setDataDetail: {
          type: Object,
          required: true,
          //   default: function () {
          //     return {
          //       id: "1",
          //       name: "dyh",
          //       show_type: 1,
          //     };
          //   },
        },
      },
      data() {
        return {
          //弹窗状态 0 提示
          isShowPopup: 0,
          show_info_box: false,
        };
      },
      watch: {},
      created() {},
      mounted() {
        // 弹窗开启
        this.$bus.$on("InfoPopup", (id) => {
          this.showInfoPopup();
        });
      },
      methods: {
        // 开启弹窗
        showInfoPopup() {
          this.show_info_box = true;
        },
        // 关闭弹窗
        closeInfoPopup() {
          this.show_info_box = false;
        },
      },
      beforeDestroy() {
        this.$bus.$off(["InfoPopup"]);
        console.log("页面卸载popup");
      },
    };
    </script>

## 页面内使用 ##

<template>
      <div class="about">
        <h1>组件内关闭弹窗</h1>
        <button @click="popup()">弹窗</button>
        <Popup2 :setDataDetail="setDataDetail"/>
      </div>
    </template>
    <script>
    import Popup2 from "@/components/Popup2";
    export default {
      name: "Popupuse",
      components: {
        Popup2,
      },
      data() {
        return {
          setDataDetail: {},
        };
      },
      computed: {},
      mounted() {
        
      },
      methods: {
        popup(){
          this.$bus.$emit('InfoPopup',0)
        },
        
      },
      beforeDestroy() {
        console.log("popupuse卸载了");
      },
    };
    </script>

[20210802173548643.gif]: /images/20220829/ff9a53c35dca45aa911774d62b647524.png