携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情

一、不同于Notification 通知、Message 消息提示的一种自定义信息提示组件$tip

效果

1.组件封装

tips/index.js

import Vue from 'vue'
import tips from './tip.vue'
const Tips = Vue.extend(tips)
const tip = function(options, type) {
  if (options === undefined || options === null) {
    options = {
      content: ''
    }
  } else if (typeof options === 'string' || typeof options === 'number') {
    options = {
      content: options
    }
    if (type !== undefined && options != null) {
      options.type = type
    }
  }

  let instance = new Tips({
    data: options
  }).$mount()

  document.body.appendChild(instance.$el)
  instance.visible = true
  if (typeof options.time === 'number') {
    const time = setTimeout(() => {
      clearTimeout(time)
      instance.visible = false
      document.body.removeChild(instance.$el)
      instance = null
    }, options.time)
  } else {
    const time = setTimeout(() => {
      clearTimeout(time)
      instance.visible = false
      document.body.removeChild(instance.$el)
      instance = null
    }, 3000)
  }
}
export default tip

tips/tip.vue

<template>
  <div>
    <div class="tips" :class="{success:type==='success',error:type==='error'}">
      <div class="gantan">
        <svg class="icon svg-icon" aria-hidden="true">
          <use v-if="type === 'success'" xlink:href="#iconweibiaoti-1-copy" />
          <use v-else xlink:href="#icongantanhao-copy" />
        </svg>
      </div>
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      time: 3000,
      type: 'success' // 'success','warning','error'
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style scoped>
.tips{
position: fixed;
z-index: 999999;
top:30%;
left: calc(50% - 130px);
color: #ffffff;
font-size: 16px;
height: 100px;
width: 260px;
display: flex;
/* justify-content: center; */
flex-direction: column;
text-align: center;
align-items: center;
border-radius: 3px;
}
.success{
background: #26B893;
}
.error{
background: #F75D6F;
}
.gantan {
  margin: 12px;
  width: 30px;
  height: 30px;
  font-size: 15.1px;
  /* background-color: #fff; */
  border-radius: 50%
}
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  /* background-color: #fff; */
  /* border-radius: 50% */
}
</style>

2.全局注册

src/main.js

import Tips from './mycomponents/tips/index'
Vue.prototype.$tips = Tips

3.使用

this.$tips({ content: '上传头像图片只能是 JPG 格式!', type: 'error' })
this.$tips({ content: res.msg, type: 'success' })

二、 饿了么----MessageBox弹框（清除上一次弹框，防止页面出现多个弹框影响界面使用）

// 先定义一个optionMin变量 optionMin:null ，为后面存储清空做准备
if(this.optionMin){
   this.optionMin.close()
}
this.optionMin=this.$message({   // 设置变量optionMin，目的是为了下次使用时可以清除掉上次的出现
   type:'info',
   message:'提示信息'
})