Dialog 弹窗组件

element-plusDialog 组件进行封装。

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-plusDialog 所有属性,详见

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

Dialog 插槽

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