vue2提示框消息全局使用

<template>
    <!-- 全局提示框 -->
    <div class="fixed-message" v-show="visible">
       <div v-show="visible && type === 'success'" class="success">{{txt}}</div>
       <div v-show="visible && type === 'fail'" class="fail">{{txt}}</div>
       <div v-show="visible && type === 'warning'" class="warning">{{txt}}</div>
    </div>
  </template>
  <script>
      export default {
          data() {
              return {
                  visible: false,
                  txt: "",
                  type: "",
              }
          }
      }
  </script>
  
  <style lang="scss" scoped>
      .fixed-message {
          position: fixed;
          top: 0;
          left: 0;
          z-index: 99999;
          width: 100%;
          height: 1rem;
  
          >div {
              width: 100%;
              height: 100%;
              color: #FFF;
              text-align: center;
              line-height: 1rem;
              position: relative;
              top: 0rem;
              font-size: 0.4rem;
              animation: message 0.5s ease-in-out;
          }
      }
      
      @keyframes message {
          0% {
              top: -1.2rem;
          }
          100% {
              top: 0rem;
          }
      }
  
      .success {
          background: #07c160;
      }
  
      .fail {
          background: #ee0a24;
      }
  
      .warning {
          background: #ff976a;
      }
  </style>
  vue
  

另一个js文件配合使用
import MessageComponent from './index.vue';

const Message = {};

Message.install = function (Vue) {

	const MessageConstructor = Vue.extend(MessageComponent);
	const instance = new MessageConstructor();
	// 获取提示框div这个盒子
	instance.$mount(document.createElement('div'));
	document.body.appendChild(instance.$el);

	let timer;
	// 定义一个定时器。控制提示框显示隐藏的时间。

	const MsgMain = {
		show_message(txt, type) {
			clearInterval(timer);
			timer = setTimeout(() => {
				instance.visible = false;
			}, 1500);
			instance.txt = txt;
			instance.type = type;
			instance.visible = true;
		},
		success(txt, type = 'success') {
			this.show_message(txt, type);
		},
		fail(txt, type = 'fail') {
			this.show_message(txt, type);
		},
		warning(txt, type = 'warning') {
			this.show_message(txt, type);
		}
	}

	Vue.prototype.$message = MsgMain;
};

export default Message;

然后全局导入
import message from './components/meass/mesagg.js';
Vue.use(message); // 全局提示框
用法：
 denglu: Debounce(function () {
            if(this.fromindor.phone=='' ||this.fromindor.password==''){
                this.$refs.sjhas.style.top='4.3rem'
                this.mobliue=true
                setTimeout(()=>{
                    this.$refs.sjhas.style.top='-3.3rem'
                    this.mobliue=false
                   
                },3000)
            }else{
                this.$http.post('login', {
                phone: this.fromindor.phone,
                password: this.fromindor.password
            }).then((res) => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.msg);
                }
                localStorage.setItem('toke', res.data.list.token)
                this.$router.push('/')
            })
            }
           
        }),