从源头解读element-ui的message组件，揭秘其魅力所在

从源头解读element-ui的message组件，揭秘其魅力所在

前言：

Element-UI是目前最受欢迎的Vue.js UI组件库之一，凭借其丰富的组件种类、强大的功能以及友好的开发体验，赢得了广大前端开发者的青睐。在Element-UI众多的组件中，Message组件是一个非常重要的组件，它提供了各种类型的消息通知，可以帮助开发者轻松地在页面中展示各种类型的消息提示，如成功、警告、错误等。

知识点：

• hasOwnProperty：判断一个对象是否包含某个属性。
• Object.keys：获取一个对象的所有属性名。
• Message组件的类型：success、warning、info和error。
• Message组件的duration：消息持续显示的时间，单位为毫秒。
• Message组件的onClose：当消息关闭时触发的回调函数。

源码分析：

import Vue from 'vue'

const MessageConstructor = Vue.extend({
  data() {
    return {
      visible: false,
      message: '',
      type: 'info',
      duration: 3000,
      onClose: null
    }
  },
  methods: {
    show() {
      this.visible = true
      setTimeout(() => {
        this.visible = false
        if (this.onClose) {
          this.onClose()
        }
      }, this.duration)
    }
  },
  render(h) {
    return h('div', {
      class: [
        'el-message',
        `el-message--${this.type}`
      ],
      style: {
        top: `${this.top}px`
      }
    }, [
      h('p', {
        class: 'el-message__content'
      }, [
        this.message
      ])
    ])
  }
})

const Message = function(options) {
  const instance = new MessageConstructor()
  instance.message = options.message
  instance.type = options.type || 'info'
  instance.duration = options.duration || 3000
  instance.onClose = options.onClose

  instance.$mount()
  document.body.appendChild(instance.$el)

  instance.show()

  return instance
}

export default Message

从上述代码中，我们可以看到Message组件的实现原理。首先，它是一个Vue组件，通过Vue.extend()方法创建了一个组件构造函数MessageConstructor。然后，在组件构造函数中定义了组件的数据、方法和渲染函数。最后，通过export default Message导出Message组件，供外部使用。

结语：

通过对Message组件的源码分析，我们了解了其内部机制和实现原理。我们也可以看到，Element-UI的组件都是遵循着一致的开发规范，这使得Element-UI组件库具有很高的可维护性和可扩展性。希望这篇源码分析文章能够帮助大家更好地理解Element-UI的Message组件，并将其应用到自己的项目中。