animate-popup/README.md

基于vant4的vue3弹窗，拥有ios16的沉浸式效果！

# animate-popup

## 组件介绍

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

<img width="300px" src="https://xydideo.gitee.io/blog/public-image/animate-popup.gif" />

## 组件依赖

vue3、vant4、less

## 组件使用

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

```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 元素添加一个根目录

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

2. 模板中使用demo示例

```vue
<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弹层，可以重置样式

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

## 其他

app默认设置样式为：

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

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

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

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