最简单的vue消息提示全局组件的方法

<template> <div class="app-toast"    v-if="isShow"    :class="{'info': type=== 'info','success': type=== 'success','wraning': type=== 'wraning','danger': type=== 'danger'}">{{text}}</div></template><style scoped>.app-toast { position: fixed; left: 50%; top: 50%; background: #ccc; padding: 10px; border-radius: 5px; transform: translate(-50%, -50%); color: #fff;}.info { background: #00aaee;}.success { background: #00ee6b;}.wraning { background: #eea300;}.danger { background: #ee000c;}</style>

import vue from 'vue'import toastComponent from './toast.vue'// 组件构造器，构造出一个 vue组件实例const ToastConstructor = vue.extend(toastComponent)function showToast ({ text, type, duration = 2000 }) { const toastDom = new ToastConstructor({  el: document.createElement('div'),  data () {   return {    isShow: true, // 是否显示    text: text, // 文本内容    type: type // 类型   }  } }) // 添加节点 document.body.appendChild(toastDom.$el) // 过渡时间 setTimeout(() => {  toastDom.isShow = false }, duration)}// 全局注册function registryToast () { vue.prototype.$toast = showToast}export default registryToast

import toastRegistry from './toast/index'Vue.use(toastRegistry)

<template> <div class="home">  <input type="button"      value="显示弹窗"      @click="showToast"> </div></template><script>export default { name: 'home', methods: {  showToast () {   this.$toast({    text: '我是消息'    // type: 'wraning',    // duration: 3000   })  } }}</script>