element 的 this.$message( ) 消息提示实现

在vue项目中，直接通过js代码 this.$message( )就可以调出消息提示组件，这是如何实现的呢

主要分为以下几步

1.用 Vue.extend 创建组件的模板（构造函数）

2.创建一个函数，在函数内部， 实例化组件并进行挂载到相应元素上

3.将创建的这个函数绑定到Vue原型上，就可以通过this .访问了

上代码，如下目录结构

  

在main.js中

import Vue from "vue";
import message from "./main.vue";
// 1.用 Vue.extend 创建组件的模板（构造函数）
let messageConstructor = Vue.extend(message);
let instance;
const Message = function(options) {// options是传入的参数配置 {message: '成功',type: "success"offset: 80}
  // 2.实例化组件
  instance = new messageConstructor({ data: options }); // 把options导入data中
  // 3.组件挂载
  instance.$mount();
  document.body.appendChild(instance.$el);
  // 设置offset
  let verticalOffset = options.offset || 20;
  instance.verticalOffset = verticalOffset;
  instance.duration = options.duration || 3000;
  return instance;
};
export default Message;

在main.vue中

<template>
  <div  v-show="visible"
    :class="['my-message', 'my-message-' + type, center ? 'is-center' : '']"
    :style="positionStyle"
  >
    <slot>
      <p>{{ message }}</p>
    </slot>
    <i v-if="showClose" class="el-icon-close" @click="close"></i>
  </div>
</template>
<script>
export default {
  name: "Message",
  data() {
    return {
      visible:false,
      verticalOffset: 20,
      duration: 3000,
      timer: null,
      center: false,
      showClose: false,
       closed: false,
    };
  },
  mounted() {
    this.autoClose();
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
    watch: {
      closed(newVal) {
        if (newVal) {
          this.visible = false;
        }
      }
    },
  computed: {
    positionStyle() {
      return {
        top: `${this.verticalOffset}px`,
      };
    },
  },
  methods: {
    autoClose() {
      this.timer = setTimeout(() => {
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      }, this.duration);
    },
    close() {
      this.closed = true;
      clearTimeout(this.timer);
    }
  },
};
</script>
<style>
.my-message {
  min-width: 380px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  background-color: #edf2fc;
  transition: opacity 0.3s, transform 0.4s, top 0.4s;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 15px;
}
p {
}
.my-message-info {
  color: #909399;
}
.my-message-success {
  background: #f2f9ec;
  color: #67c23a;
  border-color: #e4f2da;
}
.my-message-warning {
  background: #fcf6ed;
  color: #e6a23c;
  border-color: #f8ecda;
}
.my-message-error {
  background: #fcf0f0;
  color: #f56c6c;
  border-color: #f9e3e2;
}
.is-center {
  justify-content: center;
}
</style>

在index.js中

import Vue from "vue";
import Message from './src/main'
Vue.prototype.$message = Message 

ok了，大晚上的有点困，有些地方有些潦草，有时间再改下。。。