vue-element-plus-admin-doc/components/dialog.md

Dialog 弹窗组件

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

Dialog 组件位于 src/components/Dialog 内

用法

<script setup lang="ts">
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
import { ref } from 'vue'

const dialogVisible = ref(false)
</script>

<template>
  <ElButton type="primary" @click="dialogVisible = !dialogVisible">
    open
  </ElButton>
  <Dialog v-model="dialogVisible" title="dialog">
    <div v-for="v in 10000" :key="v">{{ v }}</div>
    <template #footer>
      <el-button @click="dialogVisible = false">close</el-button>
    </template>
  </Dialog>
</template>

Dialog 属性

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

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

Dialog 插槽

插槽名	说明	子标签
-	弹窗内容	-
title	弹窗标题内容	-
footer	弹窗底部内容	-