修改饿了么ui里面notification出现的位置和运动轨迹

在用element UI做开发的过程中，我们的UI要求notification在屏幕上居中显示。我们都知道，element只提供了左上，左下，右上，右下四个位置，可没有提供居中显示。

怎么办，首先想到的就是调调css了，因为这个成本最低，要是其它的，可能还需要去看源码。

1.第一步，先找影响notification显示的css。

将durution设置为0，如下：

1
2
3
4
5
6
this.$notify({
     title: '提示',
     message: '有错误',
     type: 'warning',
     duration:0
 })

接下来打开chrome浏览器，选中提示框，我们发现在不同的位置它有三个类名：el-notification right left

2.利用css的优先原则，将源码里的css样式全部覆盖掉，因为我这边要求的是全局都覆盖掉，所以我就用了一劳永逸的方法，全部覆盖了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.el-notification{
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.el-notification.right{
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.el-notification.left{
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

3.添加动画效果

这一步是我们本来以为需要，后来UI说不需要，我就去掉了，不过既然写了，发上来也无妨。利用css3的animation，给notification添加动画。下面只写一个从上到下的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.el-notification.left{
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    animation: notify 0.5s linear 1;
}
@keyframes notify {
  from {
    top: calc(50% - 300px);
  }
  to {
    top: 50% ;
  }
}