import{o as a,c as n,a as t}from"./app.c38d1953.js";const s='{"title":"Dialog 弹窗组件","description":"","frontmatter":{},"headers":[{"level":2,"title":"用法","slug":"用法"},{"level":2,"title":"Dialog 属性","slug":"dialog-属性"},{"level":2,"title":"Dialog 插槽","slug":"dialog-插槽"}],"relativePath":"components/dialog.md","lastUpdated":1721206001124}',p={},o=t('

Dialog 弹窗组件

对 element-plus 的 Dialog 组件进行封装。

Dialog 组件位于 src/components/Dialog 内

用法

<script setup lang="ts">\nimport { Dialog } from '@/components/Dialog'\nimport { ElButton } from 'element-plus'\nimport { ref } from 'vue'\n\nconst dialogVisible = ref(false)\n</script>\n\n<template>\n  <ElButton type="primary" @click="dialogVisible = !dialogVisible">\n    open\n  </ElButton>\n  <Dialog v-model="dialogVisible" title="dialog">\n    <div v-for="v in 10000" :key="v">{{ v }}</div>\n    <template #footer>\n      <el-button @click="dialogVisible = false">close</el-button>\n    </template>\n  </Dialog>\n</template>\n\n

Dialog 属性

除以下参数外，还支持 element-plus 的 Dialog 所有属性，详见

属性说明类型可选值默认值
modelValue是否显示弹窗，支持v-modelboolean-false
fullscreen是否显示全屏按钮boolean-true
title弹窗标题string-Dialog
maxHeight弹窗内容最大高度string/number-500px

Dialog 插槽

插槽名说明子标签
-弹窗内容-
title弹窗标题内容-
footer弹窗底部内容-
',10);p.render=function(t,s,p,e,l,c){return a(),n("div",null,[o])};export default p;export{s as __pageData};