GpPopupContainer 弹出层

# GpPopupContainer 弹出层

# 引入

import PressGpPopupContainer from '@tencent/press-plus/press-gp-popup-container/press-gp-popup-container-v2';

export default {
  components: {
    PressGpPopupContainer,
  }
}

# 代码演示

# 基础用法

<PressGpPopupContainerV2
  :show="showV2"
  popup-title="弹窗标题"
  :is-showpopup-close="true"
  @onCancel="() => showV2 = false"
  @onBack="() => showV2 = false"
>
  <div
    slot="content"
    style="height: 200px"
  />
</PressGpPopupContainerV2>

# API

# Props

参数	说明	类型	默认值
is-showpopup-back	是否显示返回按钮	boolean	`false`
is-showpopup-close	是否显示关闭按钮	boolean	`false`
popup-title	弹窗标题	string	-
custom-style	自定义样式，限`v2`版本	string	-

# Events

事件名	说明	参数
onBack	点击返回	-
onCancel	点击取消	-

# 常见问题

# 动画版本

推荐使用 v2 版本，即 press-gp-popup-container-v2.vue，展示和消失时都有动画，用户体验更好。

业务弹窗变动：

由引用 @tencent/press-plus/press-gp-popup-container/press-gp-popup-container.vue 改为 @tencent/press-plus/press-gp-popup-container/press-gp-popup-container-v2.vue
增加一个 props，show:{ type: Boolean, default: false }，并传给 PressGpPopupContainer

业务页面（或组件）改动：

只有一个地方，由 v-if="show"，改成 :show="show"。

需要额外注意，由于业务弹窗只是隐藏，并没有销毁，可能有一些变量需要在弹窗关闭或打开时重新归零。

# 实现原理及思想

原理很简单，v2 使用了 press-ui 中的 press-popup-plus。

思想很重要，要把显示隐藏的控制权交给子组件，而不是在页面（或父组件）控制，就是不要用 v-if，而是 :show=""，这样的好处是消失的时候才有动画。

横屏

← GpPopupCompetitionFormat GpPopupEditPrize →