vue creates a global toast component instance using vue

<template>
  <transition name="fades">
    <div class="Errormes"  v-if="show">{{txt}}</div>
  </transition>
</template>
 
<script>
export default {
  name: 'Toast',
  data () {
    return {
      txt: '',
      show: false
    }
  }
}
</script>
<style lang="less" scoped>
.fades-enter-active, .fades-leave-active {
  transition: opacity 0.5s;
}
.fades-enter, .fades-leave-active {
  opacity: 0;
}
/* Prompt box */
.Errormes {
  position: fixed;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 20px 30px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 16px;
  color: #fff;
  font-size: 28px;
  z-index: 999999;
  max-width: 80%;
  height: auto;
  line-height: 60px;
  text-align: center;
}
</style>

import Toast from './'
 
const toast = {}
 = (vue) => {
  const ToastClass = (Toast)
  const instance = new ToastClass()
  instance.$mount(('div'))
  (instance.$el)
 
  let t = null
  const ToastMain = {
    show (msg, seconds = 2000) {
      if (t) clearTimeout(t)
       = msg
       = true
      t = setTimeout(() => {
         = false
      }, seconds)
    }
  }
  .$toast = ToastMain
}
 
export default toast

import Vue from 'vue'
import App from './'
import toast from '@/components/Toast/index'
 
(toast)

$(message)

( options )

<div ></div>
// Create a constructorvar Profile = ({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// Create a Profile instance and mount it on an element.new Profile().$mount('#mount-point')

var MyComponent = ({
 template: '<div>Hello!</div>'
})
 
// Create and mount to #app (replaces #app)new MyComponent().$mount('#app') 
// Same as abovenew MyComponent({ el: '#app' })
 
// Or, render outside the document and then mountvar component = new MyComponent().$mount()
('app').appendChild(component.$el)

<div >
    <button @click="showLoading">showLoading</button>
</div>
function Loading(msg) {
        // Create a constructor        const Loading = ({
          template: '<div >{{ msg }}</div>',
          props: {
            msg: {
              type: String,
              default: 'loading'
            }
          },
          name: 'Loading'
        })
 
        // Create mount div        const div = ('div')
        ('id', 'loading-div')
        (div)
 
        // Create an instance and mount it on an element        new Loading().$mount('#loading-div')
 
        // Return a function that removes elements        return () => {
          (('loading-div'))
        }
}
 
// Mount to vue instance.$loading = Loading
 
 new Vue({
     el: '#root',
     methods: {
        showLoading() {
            const hide = this.$loading('Loading, please wait...')
            setTimeout(() => {
              hide()
            }, 1500)
        }
     }
})

<template>
  <div  v-if='flag'>
    <div class="contents" >
      <div class="content-top">{{  }}</div>
      <div class="content-center">{{  }}</div>
      <div class="content-bottom">
        <button @click='show' class="left">{{  }}</button>
        <button @click='hide' class="right">{{  }}</button>
      </div>
    </div>
  </div>
</template>
 
<script>
 
export default {
  data () {
    return {
      flag: true,
      text: {
          title:'title',
          msg: 'This is an information pop-up component',
          btn: {
              ok: 'Sure',
              no: 'Cancel'
          }
      }
    }
  },
 
  methods: {
    show (){
       = false;
    },
 
    hide() {
       = false;
    }
  }
}
 
</script>

import Vue from 'vue'
import PopBox from './'
 
// Returns the constructor created by an instance, but the instance constructor needs to be mounted to the pagelet popBox = (PopBox)   
 
 = (vue, text) => {
      
        // Dynamically create a div element in the body, and then this div will be replaced with the contents of the entire vue file        // At this time, popBoxDom is generally equivalent to the entire component object, and the data in the component is used by the object calling the attribute method to use the data in the component        let popBoxDom = new popBox({
            el: ('div')
        })
 
        
        // The created component instance can be accessed through the $el attribute        (popBoxDom.$el)
 
   
        // Pass the text content that needs to be passed to the component instance         = text;
 
        // Return a promise, perform asynchronous operations, return when successful, return when failure        return new Promise((res, rej) => {     
             = () => {   
                res()   //Return operation when correct                 = false;
            }
 
             = ()=>{
                rej()   //Return operation on failure                 = false;
            }
        }
 
        .$popBox = popBox    
    })
}
 
// Export and expose logical functionsexport default popBox

import PopBox from './'
 
(popBOx);
 
 
this.$popBox({
      title:'title',
      msg:'content',
      btn:{ ok:'Sure', no:'Cancel'}
}).then(()=>{
      ('ok')
}).catch(()=>{
      ('no')
})

import toastCom from "./Toast";
 
const toast = {};
 = vue => {
 const ToastCon = (toastCom);
 const ins = new ToastCon();
 ins.$mount(("div"));
 (ins.$el);
 ()
 .$toast = ;
};
 
 
 
const globalComponent = {
 install: function(Vue) {
   (toast);
 }
};
 
export default globalComponent;