Dialog 弹窗

常用的弹窗组件。

基础用法

开盖即用，更可配置 自定义 个性化使用。

<template>
  <m-button is="go" @click="visible = true">显示弹窗</m-button>
  <m-dialog v-model="visible" title="弹出框Dialog" useFull>
    <template #header>自定义 Header</template>
    Slot
    <template #footer>自定义 Footer</template>
  </m-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const visible = ref(false);
</script>

<style></style>

显示代码

宽度设置

使用 size 来定义弹出框尺寸。

<template>
  <m-button is="go" @click="visible1 = true">显示弹窗 max</m-button>
  <m-button is="go" @click="visible2 = true">显示弹窗 s</m-button>
  <m-button is="go" @click="visible3 = true">显示弹窗 m</m-button>
  <m-button is="go" @click="visible4 = true">显示弹窗 l</m-button>
  <m-button is="go" @click="visible5 = true">自定义宽度</m-button>

  <m-dialog v-model="visible1" title="Size：max" size="max"> 页面宽度95% /高度95% </m-dialog>
  <m-dialog v-model="visible2" title="Size：s" size="s"> 页面宽度30%/高度70% </m-dialog>
  <m-dialog v-model="visible3" title="Size：m" size="m"> 页面宽度50%/高度70% </m-dialog>
  <m-dialog v-model="visible4" title="Size：l" size="l"> 页面宽度70%/高度70% </m-dialog>
  <m-dialog v-model="visible5" title="自定义宽度" width="200"> 自定义宽度 </m-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
const visible4 = ref(false);
const visible5 = ref(false);
</script>

<style></style>

显示代码

高度设置

使用 height 来定义弹窗框高度。

<template>
  <m-button is="go" @click="visible1 = true">自定义高度数值</m-button>
  <m-button is="go" @click="visible2 = true">自定义高度百分比</m-button>
  <m-button is="go" @click="visible3 = true">自适应高度</m-button>

  <m-dialog v-model="visible1" title="自定义高度" height="200"> 自定义高度：200 </m-dialog>
  <m-dialog v-model="visible2" title="自定义高度" height="90%"> 自定义高度：90% </m-dialog>
  <m-dialog v-model="visible3" title="自适应高度" height="auto"> 自适应高度 </m-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
</script>

<style></style>

显示代码

偏移设置

使用 offsetX 与 offsetY 来定义弹窗框位置偏移量。

<template>
  <m-button is="go" @click="visible1 = true">offsetX:300</m-button>
  <m-button is="go" @click="visible2 = true">offsetY:300</m-button>
  <m-button is="go" @click="visible3 = true">offsetX:20%</m-button>
  <m-button is="go" @click="visible4 = true">offsetY:20%</m-button>

  <m-dialog v-model="visible1" title="offsetX设置" offsetX="300"> offsetX:300 </m-dialog>
  <m-dialog v-model="visible2" title="offsetY设置" offsetY="300"> offsetY:300 </m-dialog>
  <m-dialog v-model="visible3" title="offsetX设置" offsetX="20%"> offsetX:20% </m-dialog>
  <m-dialog v-model="visible4" title="offsetY设置" offsetY="20%"> offsetY:20% </m-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
const visible4 = ref(false);
</script>

<style></style>

显示代码

使用 插槽位置 展示

字段	描述
footer	Dialog 底部
header	Dialog 标题

Api

Attribute 属性

属性名	说明	类型	可选值	默认值
size	内置尺寸	string	"l" / "m" / "max" / "s"	m
height	高度	string / number		500
width	宽度	string / number
offsetX	X 轴偏移量	string / number		0
offsetY	Y 轴偏移量	string / number		0
keepAlive	缓存模式	boolean		false
title	Dialog 标题	string		'Dialog'
useFull	使用全屏模式	boolean		false
closeOnMod	点击 Mod 退出	boolean		true
closeOnEsc	使用 Esc 退出	boolean		true
draggable	开启拖拽	boolean		false