跟随Element学习Vue小技巧(36)——Notification

1,712 阅读4分钟

我不想后悔,不想再懊恼

当时为什么没有去做?

前言

临时通知:今天没有作业!

  • 小明,上王者
  • 小红,上王者
  • 小宇,上王者
  • 天天,上王者

滴滴答,滴滴答...
嘟嘟——
您有新消息,请注意查收
纳尼,6连跪,也不至于这样吧
早知道,今天不过节了 ╮(╯▽╰)╭

1 Notification

等宽布局

代码片段

.el-notification {
    display: flex;
    width330px;
    padding14px 26px 14px 13px;
    border-radius8px;
    box-sizing: border-box;
    border1px solid #ebeef5;
    position: fixed;
    background-color#fff;
    ...
}

技巧解析

div,典型的块元素,流体盒子,默认与父级等宽
span,典型的行内元素,内联盒子,随文本变化
h2.titlediv.content居然不与父级等宽,而是随文字变化?
咋回事呢?块元素怎么表现出内联元素的特性?
display:inline-block,虽然可以,但是各自随文字变化,不会等宽
到底咋回事呀?感觉盒子会伸缩一样?
不错,就是伸缩盒!display:flex

学习CSS布局 传送门
Flex布局教程 传送门

位置信息

找呀找呀找朋友,找到一个好朋友...
你的好朋友,现在在哪呢?

代码片段

methods: {
  open1() {
    this.$notify({
      title'自定义位置',
      message'右上角弹出的消息'
    });
  },

  open2() {
    this.$notify({
      title'自定义位置',
      message'右下角弹出的消息',
      position'bottom-right'
    });
  },

  open3() {
    this.$notify({
      title'自定义位置',
      message'左下角弹出的消息',
      position'bottom-left'
    });
  },

  open4() {
    this.$notify({
      title'自定义位置',
      message'左上角弹出的消息',
      position'top-left'
    });
  }
}
data() {
  return {
    ...
    position'top-right'
  };
},
computed: {
  horizontalClass() {
    return this.position.indexOf('right') > -1 ? 'right' : 'left';
  },

  verticalProperty() {
    return /^top-/.test(this.position) ? 'top' : 'bottom';
  },

  positionStyle() {
    return {
      [this.verticalProperty]: `${ this.verticalOffset }px`
    };
  }
},
...
let verticalOffset = options.offset || 0;
instances.filter(item => item.position === position).forEach(item => {
  verticalOffset += item.$el.offsetHeight + 16;
});
verticalOffset += 16;
instance.verticalOffset = verticalOffset;
...

技巧解析

四种位置关系:
top-right bottom-right
bottom-left top-left
分两类,horizontal 和 vertical
每个纵向距离依次递增
verticalOffset += 16

方法扩展

你以为笨方法都是笨小孩想出来的吗?
其实,最笨的方法,也是聪明想的出来的
毕竟,偷懒也是有利于发展的嘛 还在摸鱼,BUG改完了没?工作饱和了吗?

['success', 'warning', 'info', 'error'].forEach(type => {
  Notification[type] = options => {
    if (typeof options === 'string' || isVNode(options)) {
      options = {
        message: options
      };
    }
    options.type = type;
    return Notification(options);
  };
});
// options增加type属性
this.$notify({
  title: '成功',
  message: '这是一条成功的提示消息',
  type: 'success'
});

// 方法上扩展类型属性,本质同上
this.$notify.error({
  title: '错误',
  message: '这是一条错误的提示消息'
});

技巧解析

每次配置都要加上type属性,麻烦
好吧好吧,直接调用方法呗
Notification,实例上挂载方法,内部添加type属性
我的鱼呢,再摸会儿,嘻嘻嘻



我要用什么样的速度 才能与你相遇

参考链接

往期回顾