From cf616e4f1220926bedde63fcb7ab73da0db5f199 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Fri, 17 Oct 2025 10:22:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20element=20plus=E4=B8=AD=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8messageBox=E7=9A=84=E5=86=85=E5=AE=B9=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81html=EF=BC=88=E4=B8=8D=E4=BD=BF=E7=94=A8jsx=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/messageBoxWithHtml.vue | 35 +++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/views/demo/messageBoxWithHtml.vue

diff --git a/src/views/demo/messageBoxWithHtml.vue b/src/views/demo/messageBoxWithHtml.vue
new file mode 100644
index 0000000..c341e3c
--- /dev/null
+++ b/src/views/demo/messageBoxWithHtml.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="p-5 space-y-5 !bg-gray-100">
+        <el-card header="element plus中使用messageBox的内容支持html（不使用jsx）">
+            <el-button @click="showMessageBox"> 点击弹出确认框 </el-button>
+        </el-card>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const showMessageBox = () => {
+    ElMessageBox.confirm('<div> <h1>这是一个h1标签</h1><br/><p>这是一个p标签</p> </div>', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true, // 这句是重点，支持message内容转为html格式
+    })
+        .then(() => {
+            ElMessage({
+                type: 'success',
+                message: '删除成功!',
+            });
+        })
+        .catch(() => {
+            ElMessage({
+                type: 'info',
+                message: '取消删除',
+            });
+        });
+};
+</script>
+
+<style lang="scss" scoped></style>