Vue.extend你所不知道的秘密

Vue.extend你所不知道的秘密

最近用TS实现了一遍element-ui的message组件（实现一个全局的提示框，并可以使用js在vue组件中进行调用），发现了Vue.extend的用法。

在开发项目的时候，发现这个东西用的比较少，因为大部分时候都是写一个vue组件，然后在别的组件引入就好了。

这里以element-ui的源码进行解读：

这是message组件代码（没什么好说的，很正常的写法）：

<template>
  <transition name="el-message-fade" @after-leave="handleAfterLeave">
    <div
      :class="[
        'el-message',
        type && !iconClass ? `el-message--${ type }` : '',
        center ? 'is-center' : '',
        showClose ? 'is-closable' : '',
        customClass
      ]"
      :style="positionStyle"
      v-show="visible"
      @mouseenter="clearTimer"
      @mouseleave="startTimer"
      role="alert">
      <i :class="iconClass" v-if="iconClass"></i>
      <i :class="typeClass" v-else></i>
      <slot>
        <p v-if="!dangerouslyUseHTMLString" class="el-message__content">{
   
   { message }}</p>
        <p v-else v-html="message" class="el-message__content"></p>
      </slot>
      <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></i>
    </div>
  </transition>
</template>

<script type="text/babel">
  const typeMap = {
    success: 'success',
    info: 'info',
    warning: 'warning',
    error: 'error'
  };

  export default {
    data() {
      return {
        visible: false,
        message: '',
        duration: 3000,
        type: 'info',
        iconClass: '',
        customClass: '',
        onClose: null,
        showClose: false,
        closed: false,
        verticalOffset: 20,
        timer: null,
        dangerouslyUseHTMLString: false,
        center: false
      };
    },

    computed: {
      typeClass() {
        return this.type && !this.iconClass
          ? `el-message__icon el-icon-${ typeMap[this.type] }`
          : '';
      },
      positionStyle() {
        return {
          'top': `${ this.verticalOffset }px`
        };
      }
    },

    watch: {
      closed(newVal) {
        if (newVal) {
          this.visible = false;
        }
      }
    },

    methods: {
      handleAfterLeave() {
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      },

      close() {
        this.closed = true;
        if (typeof this.onClose === 'function') {
          this.onClose(this);
        }
      },

      clearTimer() {
        clearTimeout(this.timer);
      },

      startTimer() {
        if (this.duration > 0) {
          this.timer = setTimeout(() => {
            if (!this.closed) {
              this.close();
            }
          }, this.duration);
        }
      },
      keydown(e) {
        if (e.keyCode === 27) { // esc关闭消息
          if (!this.closed) {
            this.close();
          }
        }
      }
    },
    mounted() {
      this.startTimer();
      document.addEventListener('keydown', this.keydown);
    },
    beforeDestroy() {
      document.removeEventListener('keydown', this.keydown);
    }
  };
</script>

重点是下面的代码：

import Vue from 'vue';
// 导入Message组件
import Main from './main.vue';
import { PopupManager } from 'element-ui/src/utils/popup';
import { isVNode } from 'element-ui/src/utils/vdom';

// 使用extend绑定Message组件到Vue上，下面会使用new MessageConstructor()进行实例化
let MessageConstructor = Vue.extend(Main);

// 定义一个存放message实例的变量
let instance;
// 定义一个存放message实例的数组，因为可以出现多个message提示框，不懂得去element-ui官网看下效果
let instances = [];
let seed = 1;

// Message是一个返回Message组件实例的函数（看后面的retrun）
const Message = function(options) {
  if (Vue.prototype.$isServer) return;
  // 判断this.$message.success(options)中的options
  options = options || {};
  // this.$message.success('消息提示'),当只传一个字符串时，将字符串赋值给options中的message
  if (typeof options === 'string') {
    options = {
      message: options
    };
  }
  let userOnClose = options.onClose;
  let id = 'message_' + seed++;
  options.onClose = function() {
    Message.close(id, userOnClose);
  };
  // 实例化Message组件，并传入options，如果你发现传入的options无效，请这样写：new MessageConstructor({data: {options} })
  instance = new MessageConstructor({
    data: options
  });
  instance.id = id;
  if (isVNode(instance.message)) {
    instance.$slots.default = [instance.message];
    instance.message = null;
  }
  // 将实例挂载到虚拟DOM上
  instance.$mount();
  // 将实例挂载到真是的DOM上
  document.body.appendChild(instance.$el);
  // 下面的是消息框的距离顶部的位置，以及z-index的设置
  let verticalOffset = options.offset || 20;
  instances.forEach(item => {
    verticalOffset += item.$el.offsetHeight + 16;
  });
  instance.verticalOffset = verticalOffset;
  instance.visible = true;
  instance.$el.style.zIndex = PopupManager.nextZIndex();
  // 添加到实例数组
  instances.push(instance);
  // 返回该实例
  return instance;
};

// 给message绑定四个函数，也就是可以这样调用：this.$message.success(),后面会将message组件以$符号的形式挂载到Vue的上
['success', 'warning', 'info', 'error'].forEach(type => {
  Message[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      };
    }
    options.type = type;
    return Message(options);
  };
});

// 在Message组件中挂载一个关闭方法，从instances数组中删除需要删除的实例（每个Message实例3秒钟后会自动消失）
Message.close = function(id, userOnClose) {
  let len = instances.length;
  let index = -1;
  let removedHeight;
  for (let i = 0; i < len; i++) {
    if (id === instances[i].id) {
      removedHeight = instances[i].$el.offsetHeight;
      index = i;
      if (typeof userOnClose === 'function') {
        userOnClose(instances[i]);
      }
      instances.splice(i, 1);
      break;
    }
  }
  if (len <= 1 || index === -1 || index > instances.length - 1) return;
  for (let i = index; i < len - 1 ; i++) {
    let dom = instances[i].$el;
    dom.style['top'] =
      parseInt(dom.style['top'], 10) - removedHeight - 16 + 'px';
  }
};

// 同上
Message.closeAll = function() {
  for (let i = instances.length - 1; i >= 0; i--) {
    instances[i].close();
  }
};

export default Message;