1. Implement logic

  1. Create the utility class create.js and instantiate the.vue file as a DOM object
  2. Hang the DOM onto the body
  3. When the component is destroyed, call removeChild on the body to remove the DOM object
  4. Define notice.vue, use create.js to mount globally, and implement display and timed shutdown effects

2. Implementation code

//create.js
import Vue from 'vue'

// Component - Component configuration object
// props - The properties passed to it
function create(Component, props) {
  // 1. Build an instance of Component
  const vm = new Vue({
    render(h) {
      / / h is the createElement method
      // It returns a vNode
      return h(Component, { props })
    }
  }).$mount() // The vNode can be converted to the real node $el without setting the mount target
  // 2. Mount to body
  //document.body.appendChild(vm.$el)
  document.querySelector(".msgBox").appendChild(vm.$el)// Mount to a fixed div
  // 3. Obtain the component instance
  const comp = vm.$children[0]

  comp.remove = () = > {
    document.body.removeChild(vm.$el)
    vm.$destroy()
  }
  
  return comp
}
export default create

//Notice.vue
<template>
  <div class="box" v-if="isShow">
    <h3>{{title}}</h3>
    <p class="box-content">{{message}}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String.default: ""
    },
    message: {
      type: String.default: ""
    },
    duration: {
      type: Number.default: 1000}},data() {
    return {
      isShow: false
    };
  },
  methods: {
    show() {
      this.isShow = true;
      setTimeout(this.hide, this.duration);
    },
    hide() {
      this.isShow = false;
      this.remove(); }}};</script>

<style>
.box  
  width: 100%;
  top: 16px;
  left: 0;
  text-align: center; 
  background-color: #fff;
  border: grey 3px solid; 
} 
</style>

//main.js
Vue.prototype.$notice = function(opts) {
  const comp = create(Notice, opts);
  comp.show();
  return comp;
};

//index.html<! DOCTYPE html><html lang="en">
  <head> 
    <style>
      .msgBox{position:fixed ; width: 100%; }</style>
  </head>
  <body>
    <div class="msgBox"></div>
    <div id="app"></div> 
  </body>
</html>

//jform/index.vue
 methods: {
        onClick() {
            this.$refs.submitForm.validate(isVaild= > {
                if(isVaild){
                    this.$notice({
                      title : "Operation tips".message : "Verification successful"})},else {
                      this.$notice({
                      title : "Operation tips".message : "Verification failed"}}})); }},Copy the code

Implementation Code 2

Vue.extend implements dom mounting

import Vue from 'vue'
// Component - Component configuration object
// props - The properties passed to it
function create(Component, props) {
   // Input with parameters
   const Ctor = Vue.extend(Component); 

   // Initialize the instance with the constructor
   const newComp = new Ctor({
       propsData: props
   });
   // const vm = new Vue();
  // the vm is actually a Vue instance, the root instance, corresponding to access this.$root
  //vm.chlidren[0] Since the VM has only one child component, it corresponds to the App, which is the root component
  Chlidren [0] is an instantiation of VueComponent
  // The code newComp above is equivalent to VueComponent's Vm. chlidren[0], so you can no longer access child components with NewcomP. chlidren[0]
  
   newComp.$mount();// Render the real DOM

   // Add the component instance to body
   document.body.appendChild(newComp.$el);
 
   newComp.remove = () = > {
       / / remove the dom
       document.body.removeChild(newComp.$el);
       // Destroy the component
       newComp.$destroy();
   }; 
   return newComp;
   
}
export default create
Copy the code