PopupContainer 弹窗容器

引入

import PressPopupContainer from '@tencent/press-next/press-popup-container/press-popup-container';

export default {
  components: {
    PressPopupContainer,
  }
}

代码演示

基础用法

<PressPopupContainer
  :show="dialog.show"
  :title="dialog.title"
  :top-right-btn-text="dialog.topRightBtnText"
  :right-border-btn="dialog.rightBorderBtn"
  :show-title="dialog.showTitle"
  @clickClose="clickClose"
  @topRightBtn="topRightBtn"
>
  <div style="height: 100px;padding: 20px;">
    content
  </div>
</PressPopupContainer>

<script lang="ts" setup>
import { ref } from 'vue';

const dialog = ref({
  show: true,
  title: '弹窗标题',
  topRightBtnText: '确定',
  rightBorderBtn: true,
  showTitle: true,
});

const clickClose = () => {
  console.log('[clickClose]');
  dialog.value.show = false;
};

const topRightBtn = () => {
  console.log('[topRightBtn]');
  dialog.value.show = false;
};

</script>

API

Props

参数	说明	类型	默认值
show	是否显示弹窗	boolean	false
title	标题	string	-
show-title	是否展示标题	boolean	true
top-right-btn-text	右上角按钮文案	string	-
right-border-btn	右上角按钮文案是否为线框	boolean	false

Events

事件名	说明	参数
clickClose	点击关闭	-
topRightBtn	点击右上角按钮	-