w-component-ui/src/components/message/message.js

w Vue components project

//引用模板文件
import Message from './WMessage.vue';
//新建一个对象，用来保存实例
let message = {};
let instances = [];
//删除dom元素
let removeDom =(el,id) => {
	el.classList.remove('open');
  setTimeout(()=>{
    el.parentNode.removeChild(el);
  },400);
  let len = instances.length;
  let index = -1;
  /** 调用删除方法后，先把元素从数组中删除，删除掉open类
   *  400毫秒后删除元素
   *  接着循环现有的数组 改变每个元素的top值
   * */
  for (let i = 0; i < len; i++) {
    if (id === instances[i].id) {
      index = i;
      instances.splice(i, 1);
      break;
    }
  }
  if (len <= 1 || index === -1 || index > instances.length - 1) return;
  const removedHeight = instances[index].$el.offsetHeight;// 获取删除元素的高度
  for (let i = index; i < len - 1 ; i++) {
    let dom = instances[i].$el;
    dom.style['top'] =
      parseInt(dom.style['top'], 10) - removedHeight - 16 + 'px';
  }
};
let seed = 1;
message.install = function (Vue) {
	const ToastController = Vue.extend(Message);
	// 用户可以再Vue实例通过this.$Toast来访问以下的内容
	Vue.prototype.$message = (option = {}) => {
    let id = 'message_' + seed++;
		//实例挂在到刚创建的Div
		let instance = new ToastController().$mount(document.createElement('div'));
    instance.id = id;
		instance.duration = option.duration || instance.duration;
		// 用户可以设置message属性也可以不设置，不设置时：则直接将option的内容作为message的信息进行toast内容展示
		instance.message = option.message || option;
		instance.type = option.type || instance.type;
		// 将message挂在到DOM上
    document.body.appendChild(instance.$el);
    setTimeout(()=>{
      instance.$el.className = instance.$el.className+' '+'open';
    },10);
    let verticalOffset = option.offset || 20;
    instances.forEach(item => {
      verticalOffset += item.$el.offsetHeight + 16;
    });
    instance.verticalOffset = verticalOffset;// 设置提示框的top值
    instances.push(instance);// 把元素添加到元素数组中

    // let children = document.getElementsByClassName('message_main_bg');
    // let height = 0;
    // let num = 1000;
    // for(let i= 0;i<children.length;i++){
    //   let marginTop = 20 * (i + 1);
    //   if(i > 0) height += children[i - 1].offsetHeight;
    //   children[i].style.top = marginTop + height + 'px';
    //   children[i].style.zIndex = num ++;
    // }
    // 如果用户传入毫秒数为0 不关闭
    if(option.duration === 0) return;
		//实现自动关闭
		setTimeout(function () {
			removeDom(instance.$el,id);
		}, instance.duration)
	}

};

export default message;