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

Posted 2021-08-31 JackieDYH

效果图

上图展示有两种方式（以下代码演示只粘贴主要样式和逻辑代码）

方式一：是通过组件卸载的方式

方式二：是通过弹窗内部控制显示和隐藏

主要公共样式代码

// 弹窗
.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>