feat: add MessageBoxDemo, close #73

Author: YunYouJun

src/components.d.ts

@@ -22,6 +22,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     Logos: typeof import('./components/Logos.vue')['default']
+    MessageBoxDemo: typeof import('./components/MessageBoxDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/components/HelloWorld.vue

@@ -32,6 +32,8 @@ const value1 = ref(true)
     <el-button size="large" @click="toast">
       El Message
     </el-button>
+
+    <MessageBoxDemo />
   </div>
 
   <div class="my-2 flex flex-wrap items-center justify-center text-center">

src/components/MessageBoxDemo.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { Action } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+function open() {
+  ElMessageBox.alert('This is a message', 'Title', {
+    // if you want to disable its autofocus
+    // autofocus: false,
+    confirmButtonText: 'OK',
+    callback: (action: Action) => {
+      ElMessage({
+        type: 'info',
+        message: `action: ${action}`,
+      })
+    },
+  })
+}
+</script>
+
+<template>
+  <el-button plain @click="open">
+    Click to open the Message Box
+  </el-button>
+</template>

src/main.ts

@@ -17,6 +17,7 @@ import '~/styles/index.scss'
 import 'uno.css'
 // If you want to use ElMessage, import it.
 import 'element-plus/theme-chalk/src/message.scss'
+import 'element-plus/theme-chalk/src/message-box.scss'
 
 // if you do not need ssg:
 // import { createApp } from "vue";