animate-popup

组件介绍

animate-popup是一个弹窗组件，实现了ios15沉浸式的弹窗效果； 引入组件，自动完成背景缩放效果，详见下图: https://xydideo.gitee.io/blog/public-image/animate-popup.gif

组件依赖

vue3、vant4、less

组件使用

1. 在main.js中引入并组册

import AnimatePopup from 'animate-popup'
import "animate-popup/style.css"
app.use(AnimatePopup)

// 或者页面中局部注册
// import { AnimatePopup } from 'animate-popup'
// import "animate-popup/style.css"

2. 在index.html 的 app 元素添加一个根目录

<!-- 解决fixed跟transform的问题 -->
<div>
    <div id="app"></div>
</div>

2. 模板中使用demo示例

<template>
  <div>
    <div @click="isShow=true">点击弹窗组件</div>
    <animate-popup v-model:isShow="isShow" title="弹窗标题" :isScaleAni="true" :close-on-click-overlay="false">
      <!-- 弹窗内容插槽 -->
      <template #main>
        <div>
          弹窗的内容
        </div>
      </template>
    </animate-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 控制组件的显示否
const isShow = ref(false)
</script>

组件api

Props

| 参数 | 说明 | 类型 | 默认值 | |------------|---------------------|---------|--------| | isShow | 是否显示弹窗 | Boolean | false | | height | 弹窗高度 | String | 96vh | | title | 弹窗标题 | String | `` | | isScaleAni | 是否需要沉浸式ios交互 | Boolean | true |

组件重置

如果想修改app弹层，可以重置样式

.app-scale-class {
  transform: translateY(-3vh) scale(0.9);
  transform-origin: top;
  opacity: 0.5;
  border-radius: 20px;
  overflow: hidden;
}

其他

app默认设置样式为：

#app{
  transition: all ease 300ms;
  font-size: 14px;
  background: #fff;
}

全局样式类名为： .app-scale-class，.body-scale-class，.popup-main

其中popup-main为弹窗版心内容

.popup-main {
  height: 100%;
  .popup-content {
    overflow: scroll;
  }
}