vue3公共弹窗封装

1.在app.vue中引入

<router-view><router-view>
  <!-- 一级弹窗 -->
 <PopIndexView v-if="store.show" :name="store.name"></PopIndexView>
   <!-- 二级弹窗 -->
  <PopIndexView v-if="store.subShow" :name="store.subname"></PopIndexView>
  <script setup lang="ts">
	import { popone } from "@/stores/popup";
	const store = popone();
</script>

2.公用蒙层

<!-- 弹窗蒙层 -->
<template>
  <div class="popup">
    <Component :is="name"></Component>
  </div>
</template>

<script setup>
defineProps({ name: Object });
</script>
<style lang="less" scoped>
.popup {
  position: fixed;
  top: 0;
  height: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: rgba(210, 228, 255, 0.4);
  backdrop-filter: blur(2.13px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}
</style>

3.popup.css 弹窗动效 assets>css>pop.css

@keyframes bounce-in {
  0% {
    height: 1px;
    transform: scaleX(0) scaleY(0);
  }
  60% {
    height: 1px;
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scaleX(1) scaleY(1);
  }
  40% {
    height: 1px;
    transform: scaleX(1);
  }
  100% {
    height: 1px;
    transform: scaleX(0) scaleY(0);
  }
}

.popup-in {
  animation: bounce-in 0.8s ease;
}

.popup-out {
  animation: bounce-out 0.8s ease;
}


main.ts引入
import "@/assets/styles/pop.css"; //弹窗动效

4 store(pinia)中新建 popup.js(一级弹窗) 和subpopup.js （二级弹窗）

import { defineStore } from "pinia";

export const popone = defineStore("content", {
  state: () => {
    return {
      show: false, // 一级弹窗显隐
      name: "", // 弹窗组件名称
      title: "", // 弹窗标题
      className: "popup-in", // 特效类名
      checkInfo: null, // 检查分析信息
      url: null, // 请求地址
      params: {}, // 请求参数
      tags: [], // 弹窗表头
      dataList: null, // 弹窗数据
      colors: {}, // 颜色
      font: "", // 颜色匹配关键字
      spinning: true, // 数据加载状态
      total: 0, // 分页的总数
      order: false, // 是否展示序号
    };
  },
});

5打开一级弹窗

 @click="showDialog(num)"
 import PopSaleDetail from "@/components/pop/SaleDetail.vue";  //引入弹窗组件
 import { popone } from "@/stores/popup";
 // 查看详情 弹窗
const store = popone();
const showDialog = (val) => {
  if (val == 1) {
    store.show = true;
    store.title = "销售明细详情";
    store.name = PopSaleDetail;
    //控制打开动效
     setTimeout(() => {  
      store.className = "popup-in";
    }, 700);
  } else if (val == 2) {
    store.show = true;
    store.title = "放伞人排行榜详情";
    store.name = PopvideoPop;
     //控制打开动效
     setTimeout(() => {  
      store.className = "popup-in";
    }, 700);
  }
};

6 关闭弹窗

// 弹窗动效
import { popone } from "@/stores/popup";
const store = popone();
const className = ref(store.className);
const close = () => {
  // store.className = "popup-out";
  className.value = "popup-out";
  setTimeout(() => {
    store.show = false;
  }, 600);
};
//关闭弹窗  you动效
const colse = () => {
  className.value = "popup-out";

  setTimeout(() => {
    store.shows = false;
  }, 700);
};

7.弹窗css

  <div class="Sale-Detail-pop" :class="className">
    <div class="Sale-Detail-pop-container">
    </div>
  </div>
  <script>
	// 弹窗动效
	import { popone } from "@/stores/popup";
	const store = popone();
	const className = ref(store.className);
  </script>


<style lang="less" scoped>
.Sale-Detail-pop {
  width: 76.6875rem;
  height: 54rem;
  overflow: hidden;

  &-container {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 0.6875rem;
    border: 0.0625rem solid #a0cafe;
    padding: 2.5rem 2.6875rem 2rem 2.6875rem;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }
 }
</style>