Recently, the company has a new project, and I am responsible for building the project framework, so I resolutely choose Vue3. X + TS. Vue3. X differs from VUe2. X in that they are packaged in completely different ways. Since you need a custom prompt in your project, think about wrapping one yourself. Vue2. X provides a global method of vue.extend. Does vue3. X offer any methods as well? Sure enough from vue3. X source or found. Again, there are two steps to plug-in encapsulation.

1. Component preparation

Wrap a custom prompt box component in vue3. X’s component style. This is defined in the props property. Incoming data flow required.

<template>
    <div v-show="visible" class="model-container" ref="modal">
      <div class="custom-confirm">
        <div class="custom-confirm-header">{{ title }}</div>
        <div class="custom-confirm-body" v-html="content"></div>
        <div class="custom-confirm-footer">
          <Button @click.prevent.stop="handleOk">{{ okText }}</Button>
          <Button @click.prevent.stop="handleCancel">{{ cancelText }}</Button>
        </div>
      </div>
    </div>
</template>
Copy the code
<script lang="ts">
import { defineComponent, watch, reactive, onMounted, onUnmounted, toRefs } from "vue";
export default defineComponent({
  name: "ElMessage".props: {
    title: {
      type: String.default: "",},content: {
      type: String.default: "",},okText: {
      type: String.default: "Sure",},cancelText: {
      type: String.default: "Cancel",},ok: {
      type: Function,},cancel: {
      type: Function,},closeFromWindowClick: {type:Boolean.default:true}},setup(props, context) {
    const modal=ref(null);
    function removeModal(){
      modal.value&&document.body.removeChild((modal.value! as any).parentNode);
    }
     function handleCancel() {
      removeModal();
      props.cancel && props.cancel();
    }
    function handleOk() {
      removeModal();
      props.ok && props.ok();
    }
    onMounted(() = >{
     props.closeFromWindowClick&&window.addEventListener('click',removeModal)
    })
    onBeforeUnmount(() = >{
      props.closeFromWindowClick&&window.removeEventListener('click',removeModal)
    })
    return{ modal, handleOk, handleCancel, }; }}); </script>Copy the code

2. Plug-in registration

This is where plug-in encapsulation comes in. But the amount of code is very small, only a few core lines. This is done by calling the createVNode in vue3. X to create the virtual node and then calling the Render method to render the virtual node as a real node. And hang it to the real node. This is essentially the mount operation in the vue3. X source code.

import { createVNode, render } from 'vue';
import type {App} from "vue";
import MessageConstructor from './index.vue'
const Message: any= function(options:any){
    const container = document.createElement('div')
    // Create a virtual node
    const vm = createVNode(
      MessageConstructor,
      options,
    )
    // Render the virtual node
    render(vm, container)
    document.body.appendChild(container);
}  
export default {
    // Component registration
    install(app: App): void {
        app.config.globalProperties.$message = Message
    }
}
Copy the code

The plug-in encapsulates the full address. Mount method in createAppAPI function in ———— Packages/Run-time core/ SRC /apiCreateApp