this.$message('這是一條消息提示');
this.$message({ message: '恭喜你，這是一條成功消息', type: 'success' });

// main.js

// 1.引入組件庫
import ElementUI from 'element-ui';
// 2.使用組件庫
Vue.use(ElementUI); 

// 文件目錄：node-modules/element-ui/src/index.js
// 1.引入Message對(duì)象
import Message from '../packages/message/index.js';

// 2. 定義 install函數(shù)，
const install = function(Vue, opts = {}) {
  // 將組件遍歷注冊(cè)為全局組件，例如Button組件
  components.forEach(component => {
    Vue.component(component.name, component);
  });
  // 將方法放到Vue原型上
  Vue.prototype.$message = Message;
};

<template>
  <transition name="el-message-fade" @after-leave="handleAfterLeave">
    <div
      class="el-message"
      :style="positionStyle"
      v-show="visible">
      <slot>
        <p>{{ message }}</p>
      </slot>
    </div>
  </transition>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      visible: false,
      message: '',
      duration: 3000,
      onClose: null,
      closed: false,
      verticalOffset: 20,
      timer: null
    };
  },

  computed: {
    positionStyle() { // 控制當(dāng)前組件的顯示位置
      return {
        'top': `${ this.verticalOffset }px`
      };
    }
  },

  watch: {
    // 監(jiān)聽closed的變化，設(shè)置為true時(shí)，將組件銷毀
    closed(newVal) {
      if (newVal) {
        this.visible = false;
      }
    }
  },

  methods: {
    // transtion組件的鉤子，觸發(fā)after-leave時(shí)執(zhí)行
    handleAfterLeave() {
      this.$destroy(true); // 銷毀組件
      this.$el.parentNode.removeChild(this.$el); // 將組件的DOM移除
    },

    close() {
      this.closed = true; // 組件隱藏
      
      if (typeof this.onClose === 'function') {
        this.onClose(this);
      }
    },
    // 每次手動(dòng)啟動(dòng)編譯之后 設(shè)置其展示時(shí)間duration之后關(guān)閉
    startTimer() {
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          if (!this.closed) {
            this.close();
          }
        }, this.duration);
      }
    }
  },
  mounted() {
    this.startTimer();
  }
};
</script>

const Message = options => {
  // 邏輯編寫....
}
export default Message;

// 1. 使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”
let MessageConstructor = Vue.extend(Main);
// 2. 組件實(shí)例, 可以通過instance訪問 visible和verticalOffset
instance = new MessageConstructor({
  data: options
});

let MessageConstructor = Vue.extend(Main);

let instance; // 當(dāng)前組件
let instances = []; // 將所有的message組件收集，用于位置的判斷和銷毀等
let seed = 1; // 每個(gè)message實(shí)例都有一個(gè)唯一標(biāo)識(shí)

const Message = options => {
  options = options || {
    message: 'content' + Date.now(),
    onClose(message){
      console.log('關(guān)閉時(shí)的回調(diào)函數(shù), 參數(shù)為被關(guān)閉的 message 實(shí)例',message);
    }
  };

  if (typeof options === 'string') {
    options = {
      message: options
    };
  }

  // 關(guān)閉時(shí)的回調(diào)函數(shù), 參數(shù)為被關(guān)閉的 message 實(shí)例
  let userOnClose = options.onClose;
  let id = 'message_' + seed++;
  
  // 增加 onClose 方法，組件銷毀時(shí)，在組件內(nèi)部調(diào)用
  options.onClose = function() { 
    Message.close(id, userOnClose);
  };

  // 組件實(shí)例，此時(shí)options與組件的data關(guān)聯(lián)
  instance = new MessageConstructor({
    data: options
  });
  instance.id = id; // 設(shè)置ID
  
  instance.$mount(); // 因?yàn)椴淮嬖趀l選項(xiàng)，實(shí)例不會(huì)立即進(jìn)入編譯階段，需要顯示調(diào)用$mount 手動(dòng)開啟編譯
  document.body.appendChild(instance.$el); // 將Message 組件插入到body中

  // 設(shè)置組件距離頂部的距離，每個(gè)message組件會(huì)有16px的間距
  let verticalOffset = options.offset || 20;
  instances.forEach(item => {
    verticalOffset += item.$el.offsetHeight + 16;
  });
  instance.verticalOffset = verticalOffset;

  instance.visible = true; // 控制展示
  instance.$el.style.zIndex = 99; // 控制層級(jí)
  instances.push(instance);
  return instance;
};

// 為每個(gè) type 定義了各自的方法，如 Message.success(options)，可以直接調(diào)用
['success', 'warning', 'info', 'error'].forEach(type => {
  Message[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      };
    }
    options.type = type;
    return Message(options);
  };
});

// 關(guān)閉時(shí)的回調(diào)函數(shù), 參數(shù)為被關(guān)閉的 message 實(shí)例
let userOnClose = options.onClose;

// 增加 onClose 方法，組件銷毀時(shí)，在組件內(nèi)部調(diào)用
options.onClose = function() { 
  Message.close(id, userOnClose);
};