Vue项目实战——【基于 Vue3.x + NodeJS】实现的课程表排课系统四（MyMessageBox）动态组件的编写

Vue项目实战——【基于 Vue3.x + NodeJS】实现的课程表排课系统四（MyMessageBox）

---

MessageBox

⭐️本节重点：动态组件的编写

接着上一节，点击叉号 要弹出一个提示框 如下图：

src/components/MyMessageBox/MyMessageBox.vue

<template>
  <div class="message-box" v-if="state.visible">
    <div class="wrapper">
      <header class="box-hd">
        <h1>{
  { title }}h1>
      header>
      <div class="box-board">
        
        <component :is="insert">component>
        <div class="btn-group">
          <my-button type="default" @click="handleCancelClick">{
  {
            btnCancelText
          }}my-button>
          <my-button type="primary" @click="handleConfirmClick">{
  {
            btnConfirmText
          }}my-button>
        div>
      div>
    div>
  div>
template>

<script setup>
/**
         MyMessageBox({
            title: "删除课程安排提示",
            btnCancelText: "取消",
            btnConfirmText: "删除",
            insert: h("p", "确定要删除此课程安排吗？"), // h函数动态组件
            confirm() {
            console.log("confirm");
            },
            cancel() {
            console.log("cancel");
        },
    });
*/
import MyButton from "../MyButton/MyButton.vue";
import "./index.scss";
import {
      reactive } from "vue";

const props = defineProps({
     
  title: {
     
    type: String,
    default: "MessageBox",
  },
  btnCancelText: {
     
    type: String,
    default: "Cancel",
  },
  btnConfirmText: {
     
    type: String,
    default: "Confirm",
  },
  insert: Object,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63