Poster 弹窗渲染器

用于通过函数方式动态渲染弹窗内容，适合业务中按需打开的自定义弹窗。

示例

基础用法

自定义内容

poster-content.vue

<script setup lang="ts">
import { MtButton } from '@mingto/mt-ui'

defineProps({
  title: {
    type: String,
    default: '',
  },
})

const emits = defineEmits(['close'])

function handleClose() {
  emits('close')
}
</script>

<template>
  <div class="mt-poster">
    <div class="mt-poster__title">
      {{ title }}
    </div>
    <div class="mt-poster__content" />
    <div class="mt-poster__footer">
      <MtButton
        type="primary"
        @click="handleClose"
      >
        关闭
      </MtButton>
    </div>
  </div>
</template>

<style lang="scss">
.mt-poster {
  display: flex;
  flex-direction: column;
  width: 500px;
  height: 200px;
  padding: 10px;
  background-color: #fff;

  &__title {
    font-size: 16px;
    font-weight: bold;
  }

  &__content {
    flex: 1;
  }

  &__footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>

API

Methods

方法名	说明
MtPoster(options)	创建并打开一个动态弹窗
close()	关闭当前动态弹窗
setProps(props)	动态更新内容组件的属性

Options

属性名	说明	类型	默认值
component	异步加载的内容组件	() => Promise<{ default: Component }>	-
props	传递给内容组件的属性	Record<string, unknown>	{}
events	传递给内容组件的事件处理函数，建议用于监听内容组件事件	Record<string, (...args: unknown[]) => void>	{}
dialogProps	传递给 Dialog 的属性，不包含 modelValue	Partial<Omit<DialogProps, 'modelValue'>>	{ padding: 0, alignCenter: true }
dialogEvents	传递给 Dialog 的事件处理函数	Partial<{ onClose?: () => void }>	{}

Slots

该能力通过函数渲染内容，不提供固定插槽。

注意事项

• component 依赖动态 import()，路径错误、文件不存在或网络加载失败时不会创建内容弹窗，建议业务侧在调用前确保组件路径可加载。
• dialogEvents 仅用于监听 Dialog 的关闭事件；其它 Dialog 关闭事件由 Poster 自行处理。如需响应内容组件事件请使用 events。
• 适合临时性、强业务定制的弹窗内容。
• 常规对话框优先使用 Dialog，避免过度使用函数式弹窗。