Mojo UI

Appearance

Dialog 弹窗 ​

MoDialog 用于需要用户确认、填写信息或查看关键内容的弹层场景。通过 v-model 控制显示状态，支持标题、页脚、尺寸、关闭行为和明暗主题。

基础用法 ​

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

const visible = ref(false);
</script>

<template>
  <MoButton type="primary" @click="visible = true">打开弹窗</MoButton>

  <MoDialog v-model="visible" title="创建任务">
    弹窗内容
  </MoDialog>
</template>

底部操作 ​

Light
Dark
vue
<MoDialog v-model="visible" title="发布确认">
  <p>发布后，当前配置会立即同步到生产环境。</p>

  <template #footer>
    <MoButton type="ghost" @click="visible = false">取消</MoButton>
    <MoButton type="primary" @click="visible = false">确认发布</MoButton>
  </template>
</MoDialog>

自定义标题和关闭按钮 ​

Light
Dark
vue
<MoDialog v-model="visible" :width="560">
  <template #title>模型参数</template>
  <template #close>×</template>
  自定义内容
</MoDialog>

尺寸和间距 ​

Light
Dark
vue
<MoDialog v-model="visible" title="批量导入" width="720px" :padding="30">
  内容
</MoDialog>

关闭行为 ​

Light
Dark
vue
<MoDialog
  v-model="visible"
  title="敏感操作"
  :close-on-overlay="false"
  :show-close="false"
>
  内容
</MoDialog>

无头部弹窗 ​

Light
Dark
vue
<MoDialog v-model="visible" :show-header="false">
  自定义内容
</MoDialog>

API ​

属性说明类型默认值
v-model是否显示弹窗booleanfalse
title标题文本string""
theme主题light | darklight
width弹窗宽度number | string520
padding内容内边距number | string24
showHeader是否渲染头部区域 .mo-dialog__headerbooleantrue
showClose是否显示关闭按钮booleantrue
closeOnOverlay点击遮罩或按 Esc 时是否关闭booleantrue
lockScroll弹窗打开时是否锁定页面滚动booleanfalse
zIndex弹窗层级number1000

Events ​

事件说明回调参数
open打开动画结束后触发-
close调用关闭逻辑时触发-
update:modelValue显示状态变化时触发boolean

Slots ​

插槽说明
default弹窗主体内容
title自定义标题内容
footer自定义底部操作区
close自定义关闭按钮内容