vue3 and vue2 mount instances to global (custom message prompt box component method)

//Entry file:import Vue from 'vue'
import App from './'
import router from './router'
import store from './store'
import TMessage from '@/components/TMessage/';
 
import '@/assets/css/'
 
 = false
 
.$message = TMessage;
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

//documentimport { createApp, createVNode, render } from 'vue'
import TMessage from '@/components/TMessage/'
 
// Used to store multiple instanceslet instances = [];
 
function Message(data) {
 
    // The data passed by the component (such as Login) of this method (such as variables that have not been passed must have a default value, otherwise it will be undefined to pass to TMessage    if (typeof data === 'string') {
        // Message("This is wrong"), except message, other settings default values        data = {
            message: data,
            type: 'info',
        }
    }
    data = {
        ...data,
        // Set specific data parameters, depending on the incoming display        message:  ?  : 'Default prompt message',
        type:  ?  : 'info',
        center:  ?  : true,
        offset:  ?  : 20,
        duration:  ?  : 1000
    }
 
    // Used to handle all messages after the prompt box disappears, the location of other prompt boxes (need to be called in)     = function() {
        (msgNode);
 
    }
 
    // Handle spacing between multiple instances    let offset =  || 20;
    // Used for changing offset value record    let offsetTop = offset;
    ();
 
    //  * 0: 20
    // * 1: 20 40 20 (offset of the 0th + div height of the 0th (offsetHeight) + offset of the 1st)    ((item) => {
        // The instance offsetHeight obtained directly through item is inaccurate        offsetTop +=  + offset + 26;
    });
    // Set the offset and top value     = offsetTop;
 
    // Create an instance    const app = createApp(TMessage, data);
    // Prepare the dom container    const msgNode = ('div');
 
    // Add to body    (msgNode);
    (msgNode);
 
     = offsetTop + 'px';
     = '20px';
 
    // Add the current instance to instances    (msgNode);
}
 
// Message type: success, info, error, warning['error', 'info', 'success', 'warning'].forEach(item => {
    Message[item] = function(data) {
        if (typeof data === 'string') {
            data = {
                message: data
            };
        }
 
         = item;
        return Message(data);
    };
});
 
// 
// * Get the current height of this instance// * Subtract the top of all instances after this instance from this instance to this height and then subtract the offset//  * 
 = function(msgNode) {
    // Get all newly created Nodes in the DOM structure    let curMessage = ("");
 
    // Find the current div is in the instances array subscript    let index = (item => item === msgNode);
    instances = (item => item !== msgNode);
 
    // Get the height that needs to be subtracted (66=itself height +offset height); curMessage[0].offsetHeight to get the true parsed height    let removeHeight =  + curMessage[0].offsetHeight;
 
    for (let i = index; i < ; i++) {
        curMessage[i]. = parseInt(curMessage[i].('px')[0]) - removeHeight + 'px';
    }
 
    // When =1 is the last time the close method is called. Clear instances at this time, click offsetTop again and will not accumulate continuously    if ( == 1) {
        instances = [];
    }
}
 
export default Message;
Message;

//
<template>
  <!-- Animation effect -->
  <transition name="message-fade">
    <!-- Using data bindingclass -->
    <div
      v-if="!closed"
      :class="['message', 'message-' + type, center ? 'is-center' : '']"
      :style="{ top: offset + 'px' }"
    >
      <p class="message-content">{{ type }}：{{ message }}</p>
      <i class="icon icon-close" @click="closeTip"></i>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'TMessage',
  props: {
    message: 'Default prompt message',
    type: 'info',
    center: true,
    offset: 20,
    duration: 2000,
    // Used to handle all messages, after the prompt box disappears, the location of other prompt boxes    onClose: null
  },
  data () {
    return {
      // Timer      timer: null,
      closed: false,
    }
  },
  mounted () {
     = setTimeout(() => {
      if (!) {
        ();
      }
    }, );
  },
  methods: {
    close () {
       = true;
      if (typeof  === 'function') {
        ();
      }
 
    }
  }
}
</script>

this.$('Username and password cannot be empty');
 
 // this.$message({
        //   duration: 1000,
        //   message: '1111',
        //   type: 'warning',
        // })
        // this.$message({
        //   duration: 5000,
        //   message: '5555',
        //   type: 'error',
        // })
        // this.$message({
        //   duration: 3000,
        //   message: '3333',
        //   type: 'warning',
        // })
        // this.$message({
        //   duration: 4000,
        //   message: '4444',
        //   type: 'info',
        // })
        // this.$message({
        //   duration: 2000,
        //   message: '2222',
        //   type: 'success',
        // })

//Entry file:import { createApp } from 'vue'
import App from './'
// The css file is directly importedimport '@/assets/css/'
import router from '@/route/route'
import store from '@/store/store'
import Message from '@/components/TMessage/'
 
// Vue3 loads custom components into global methodsconst app = createApp(App);
.$message = Message;
 
// 4. Create a vue application, put the App components and defined routes into the vue application, and mount it on the element with the template page id as the app.(router).use(store).mount('#app')

this.$("This is a test error");