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>