Merge pull request #7 from Leopoldthecoder/master

update Message animation and Rate/Switch doc
2016-09-05 23:27:34 +08:00 · 2016-09-05 23:27:34 +08:00 · bb1ea77af5
parent 0080558807 95b40b739e
commit bb1ea77af5
14 changed files with 184 additions and 105 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -8,10 +8,14 @@
 - Button 组件增加 `nativeType` 属性，用于组件内 `<button>` 标签的原生 `type` 属性，默认值为 `button`
 - 修复 Table 自定义模板中渲染静态数据错误
 - 修复 Table 中被固定列的高度不与其他列的高度协调的问题
- 修复 TimePicker 的 `picker-options` 属性
+- 修复 Time Picker 的 `picker-options` 属性
 - 修复一些组件图标丢失的问题
 - 修复远程搜索的 Select 在 Form 中的显示问题
- 修复 input-number 输入小数和非数字值时的问题
+- 修复 Input Number 输入小数和非数字值时的问题
+- 修复 Select 选中 value 为 0 的值时绑定值不更新的问题
+
+#### 非兼容性更新
+- Menu 组件 `mode` 属性默认值修改为 `vertical`

 ### 1.0.0-rc.1

--- a/examples/docs/color.md
+++ b/examples/docs/color.md
@ -150,8 +150,8 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
  </el-col>
  <el-col :span="6">
    <div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
-      <div class="demo-color-box color-gray bg-white">Dark White<div class="value">#F9FAFC</div></div>
-      <div class="demo-color-box color-gray bg-white-dark">White<div class="value">#FFFFFF</div></div>
+      <div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
+      <div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
    </div>
  </el-col>
 </el-row>
--- a/examples/docs/rate.md
+++ b/examples/docs/rate.md
@ -8,12 +8,33 @@
        value4: null,
        value5: 3.7
      };
+    },
+    mounted() {
+      this.$nextTick(() => {
+        let firstDemo = document.querySelector('.source');
+        firstDemo.style.padding = '0';
+        firstDemo.style.display = 'flex';
+      });
    }
  }
 </script>
 <style>
-  .demo-box.demo-rate {
-    margin: 20px 0;
+  .demo-rate .block {
+    display: inline-block;
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    flex: 1;
+    &:last-child {
+      border-right: none;
+    }
+  }
+  
+  .demo-rate .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
  }
 </style>

@ -25,22 +46,19 @@

 适用广泛的基础用法

-:::demo
+:::demo 评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。
 ``` html
-<el-rate v-model="value1"></el-rate>
-```
-:::
-
-### 区分颜色
-
-利用颜色对分数及情感倾向进行分级
-
-:::demo 分数可以被分为三个等级，对应的两个阈值可分别通过 `low-threshold` 和 `high-threshold` 设定。
-``` html
-<el-rate
-  v-model="value2"
-  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
-</el-rate>
+<div class="block">
+  <span class="demonstration">默认不区分颜色</span>
+  <el-rate v-model="value1"></el-rate>
+</div>
+<div class="block">
+  <span class="demonstration">区分颜色</span>
+  <el-rate
+    v-model="value2"
+    :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+  </el-rate>
+</div>
 ```
 :::

@ -57,9 +75,11 @@
 ```
 :::

-### 其他 icon
+### 其它 icon

-:::demo 当有多层评价时，可以用不同类型的 icon 区分评分层级
+当有多层评价时，可以用不同类型的 icon 区分评分层级
+
+:::demo 设置`icon-classes`属性可以自定义对应 3 个不同分段的图标。本例还使用`void-icon-class`指定了未选中时的图标类名。
 ``` html
 <el-rate
  v-model="value4"
@ -81,7 +101,7 @@
  disabled
  show-text
  text-color="#ff9900"
-  text-template="{value} 分">
+  text-template="{value}">
 </el-rate>
 ```
 :::
--- a/examples/docs/switch.md
+++ b/examples/docs/switch.md
@ -1,8 +1,7 @@
 <style>
  .demo-box.demo-switch {
    .el-switch {
-      display: block;
-      margin: 20px 0;
+      margin: 20px 20px 20px 0;
    }
  }
 </style>
@ -19,54 +18,63 @@
  };
 </script>

-## 基本用法
+## Switch 开关

-Switch 组件提供了平滑的开关。
+表示两种相互对立的状态间的切换，多用于触发「开/关」。

-:::demo 只需要`el-switch`元素绑定`v-model`到一个变量即可完成状态改变，状态是一个`Boolean`。
+### 基本用法
+
+适用广泛的基础用法
+
+:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`on-text`属性与`off-text`属性来设置开关的文字描述，使用`on-color`属性与`off-color`属性来设置开关的背景色。

 ```html
-<el-switch v-model="value1"></el-switch>
+<el-switch
+  v-model="value1"
+  on-text=""
+  off-text="">
+</el-switch>
+<el-switch
+  v-model="value2"
+  on-color="#13ce66"
+  off-color="#ff4949">
+</el-switch>
 ```
 :::

-## 禁用状态
+### 禁用状态

-:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用，此例中我们使用了`on-text`属性与`off-text`属性来设置开关旁的描述，`value`属性用于定义无需双向绑定情况的开关值。
+:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用。

 ```html
-<el-switch disabled></el-switch>
-<el-switch disabled :value="false"></el-switch>
-<el-switch on-text="" off-text="" disabled></el-switch>
-<el-switch on-text="" off-text="" disabled :value="false"></el-switch>
+<el-switch
+  v-model="value3"
+  on-text=""
+  off-text=""
+  disabled>
+</el-switch>
+<el-switch
+  v-model="value3"
+  disabled>
+</el-switch>
 ```
 :::

-## 自定义颜色
+### Attributes

-:::demo 使用`on-color`和`off-color`属性，可以自定义开关颜色。`on-icon-class`定义了开关时的图标，具体图标可以参见 Icon 组件文档，当设置了 Icon 后，text 值将被忽略。
-
-```html
-<el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
-<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>
-```
-:::
-
-## Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| value     | switch 的选中状态   | boolean    |        —       | true |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | width  | switch 的宽度（像素）    | number   | — | 58（有文字）/ 46（无文字） |
-| on-icon-class  | switch 打开时所显示图标的类名    | string   | — | — |
-| off-icon-class  | switch 关闭时所显示图标的类名    | string   | — | — |
-| on-text  | switch 打开时的文字    | string   | — | 'ON' |
-| off-text  | switch 关闭时的文字    | string   | — | 'OFF' |
-| on-color  | switch 打开时的背景色    | string   | — | — |
-| off-color  | switch 关闭时的背景色    | string   | — | — |
+| on-icon-class  | switch 打开时所显示图标的类名，<br>设置此项会忽略 `on-text`    | string   | — | — |
+| off-icon-class  | switch 关闭时所显示图标的类名，<br>设置此项会忽略 `off-text`    | string   | — | — |
+| on-text  | switch 打开时的文字    | string   | — | ON |
+| off-text  | switch 关闭时的文字    | string   | — | OFF |
+| on-color  | switch 打开时的背景色    | string   | — | #20A0FF |
+| off-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
 | name  | switch 对应的 name 属性    | string   | — | — |

-## Events
+### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change  | switch 状态发生变化时的回调函数    | — |
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@ -152,7 +152,7 @@
        {
          "path": "/rate",
          "name": "评分 (rate)",
-          "title": "Rate 评分组件"
+          "title": "Rate 评分"
        }
      ]
    },
--- a/packages/message/assets/error.svg
+++ b/packages/message/assets/error.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_danger</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Element-guideline-v0.2.4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Message" transform="translate(-60.000000, -332.000000)">
+            <g id="带倾向_信息" transform="translate(60.000000, 332.000000)">
+                <g id="Rectangle-2">
+                    <g id="icon_danger">
+                        <rect id="Rectangle-2" fill="#FF4949" x="0" y="0" width="40" height="40"></rect>
+                        <path d="M25.8172627,16.3451796 C25.9390902,16.2233483 26,16.0761418 26,15.9035523 C26,15.7309628 25.9390902,15.5837563 25.8172627,15.4619289 L24.5076157,14.1827411 C24.3857882,14.0609137 24.2436575,14 24.0812196,14 C23.9187817,14 23.776651,14.0609137 23.6548235,14.1827411 L20,17.8375635 L16.3147216,14.1827411 C16.1928902,14.0609137 16.0507595,14 15.8883216,14 C15.7258876,14 15.5837569,14.0609137 15.4619294,14.1827411 L14.1522824,15.4619289 C14.0507582,15.5837563 14,15.7309628 14,15.9035523 C14,16.0761418 14.0507582,16.2233483 14.1522824,16.3451796 L17.8375608,20.0000019 L14.1522824,23.6548243 C14.0507582,23.7766517 14,23.9238582 14,24.0964477 C14,24.2690372 14.0507582,24.4162437 14.1522824,24.5380711 L15.4619294,25.8172589 C15.5837569,25.9390863 15.7258876,26 15.8883216,26 C16.0507595,26 16.1928902,25.9390863 16.3147216,25.8172589 L20,22.1624365 L23.6548235,25.8172589 C23.776651,25.9390863 23.9187817,26 24.0812196,26 C24.2436575,26 24.3857882,25.9390863 24.5076157,25.8172589 L25.8172627,24.5380711 C25.9390902,24.4162437 26,24.2690372 26,24.0964477 C26,23.9238582 25.9390902,23.7766517 25.8172627,23.6548243 L22.1319804,20.0000019 L25.8172627,16.3451796 Z" id="Path" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/packages/message/assets/info.svg
+++ b/packages/message/assets/info.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_info</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Element-guideline-v0.2.4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Message" transform="translate(-60.000000, -152.000000)">
+            <g id="带倾向_信息" transform="translate(60.000000, 152.000000)">
+                <g id="Rectangle-2">
+                    <g id="icon_info">
+                        <rect id="Rectangle-2" fill="#50BFFF" x="0" y="0" width="40" height="40"></rect>
+                        <path d="M21.6153846,26.5432099 C21.6153846,26.9478751 21.4583348,27.2918368 21.1442308,27.5751029 C20.8301268,27.8583689 20.4487194,28 20,28 C19.5512806,28 19.1698732,27.8583689 18.8557692,27.5751029 C18.5416652,27.2918368 18.3846154,26.9478751 18.3846154,26.5432099 L18.3846154,19.744856 C18.3846154,19.3401907 18.5416652,18.996229 18.8557692,18.712963 C19.1698732,18.4296969 19.5512806,18.2880658 20,18.2880658 C20.4487194,18.2880658 20.8301268,18.4296969 21.1442308,18.712963 C21.4583348,18.996229 21.6153846,19.3401907 21.6153846,19.744856 L21.6153846,26.5432099 Z M20,15.8042981 C19.4444427,15.8042981 18.972224,15.6193687 18.5833333,15.2495046 C18.1944427,14.8796406 18,14.4305255 18,13.9021491 C18,13.3737726 18.1944427,12.9246575 18.5833333,12.5547935 C18.972224,12.1849295 19.4444427,12 20,12 C20.5555573,12 21.027776,12.1849295 21.4166667,12.5547935 C21.8055573,12.9246575 22,13.3737726 22,13.9021491 C22,14.4305255 21.8055573,14.8796406 21.4166667,15.2495046 C21.027776,15.6193687 20.5555573,15.8042981 20,15.8042981 Z" id="Combined-Shape" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/packages/message/assets/success.svg
+++ b/packages/message/assets/success.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_success</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Element-guideline-v0.2.4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Message" transform="translate(-60.000000, -212.000000)">
+            <g id="带倾向_信息" transform="translate(60.000000, 212.000000)">
+                <g id="Rectangle-2">
+                    <g id="icon_success">
+                        <rect id="Rectangle-2" fill="#13CE66" x="0" y="0" width="40" height="40"></rect>
+                        <path d="M27.8255814,17.1484357 L19.01744,25.8281213 C18.9011609,25.9427083 18.7655033,26 18.610467,26 C18.455427,26 18.3197693,25.9427083 18.2034865,25.8281213 L18.0290716,25.65625 L13.1744186,20.84375 C13.0581395,20.729163 13,20.5954837 13,20.4427047 C13,20.2899293 13.0581395,20.15625 13.1744186,20.0416667 L14.3662772,18.8671857 C14.48256,18.7526023 14.6182177,18.6953107 14.7732577,18.6953107 C14.928294,18.6953107 15.0639516,18.7526023 15.1802307,18.8671857 L18.610467,22.276038 L25.8197693,15.1718713 C25.9360484,15.057288 26.071706,15 26.2267423,15 C26.3817823,15 26.51744,15.057288 26.6337228,15.1718713 L27.8255814,16.3463523 C27.9418605,16.4609357 28,16.594615 28,16.747394 C28,16.900173 27.9418605,17.0338523 27.8255814,17.1484357 L27.8255814,17.1484357 Z" id="Path" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/packages/message/assets/warning.svg
+++ b/packages/message/assets/warning.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_warning</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Message" transform="translate(-60.000000, -272.000000)">
+            <g id="带倾向_信息-copy" transform="translate(60.000000, 272.000000)">
+                <g id="Rectangle-2">
+                    <g id="icon_warning">
+                        <rect id="Rectangle-2" fill="#F7BA2A" x="0" y="0" width="40" height="40"></rect>
+                        <path d="M21.6153846,26.5432099 C21.6153846,26.9478751 21.4583348,27.2918368 21.1442308,27.5751029 C20.8301268,27.8583689 20.4487194,28 20,28 C19.5512806,28 19.1698732,27.8583689 18.8557692,27.5751029 C18.5416652,27.2918368 18.3846154,26.9478751 18.3846154,26.5432099 L18.3846154,19.744856 C18.3846154,19.3401907 18.5416652,18.996229 18.8557692,18.712963 C19.1698732,18.4296969 19.5512806,18.2880658 20,18.2880658 C20.4487194,18.2880658 20.8301268,18.4296969 21.1442308,18.712963 C21.4583348,18.996229 21.6153846,19.3401907 21.6153846,19.744856 L21.6153846,26.5432099 Z M20,15.8042981 C19.4444427,15.8042981 18.972224,15.6193687 18.5833333,15.2495046 C18.1944427,14.8796406 18,14.4305255 18,13.9021491 C18,13.3737726 18.1944427,12.9246575 18.5833333,12.5547935 C18.972224,12.1849295 19.4444427,12 20,12 C20.5555573,12 21.027776,12.1849295 21.4166667,12.5547935 C21.8055573,12.9246575 22,13.3737726 22,13.9021491 C22,14.4305255 21.8055573,14.8796406 21.4166667,15.2495046 C21.027776,15.6193687 20.5555573,15.8042981 20,15.8042981 Z" id="Combined-Shape" fill="#FFFFFF" transform="translate(20.000000, 20.000000) scale(1, -1) translate(-20.000000, -20.000000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/packages/message/src/main.js
+++ b/packages/message/src/main.js
@ -27,36 +27,19 @@ var Message = function(options) {
  document.body.appendChild(instance.vm.$el);
  instance.vm.visible = true;
  instance.dom = instance.vm.$el;
-
-  let topDist = 0;
-  for (let i = 0, len = instances.length; i < len; i++) {
-    topDist += instances[i].$el.offsetHeight + 20;
-  }
-  topDist += 20;
-  instance.top = topDist;
  instances.push(instance);
 };

 Message.close = function(id, userOnClose) {
-  let index;
-  let removedHeight;
-  for (var i = 0, len = instances.length; i < len; i++) {
+  for (let i = 0, len = instances.length; i < len; i++) {
    if (id === instances[i].id) {
      if (typeof userOnClose === 'function') {
        userOnClose(instances[i]);
      }
-      index = i;
-      removedHeight = instances[i].dom.offsetHeight;
      instances.splice(i, 1);
      break;
    }
  }
-
-  if (len > 1) {
-    for (i = index; i < len - 1 ; i++) {
-      instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 20 + 'px';
-    }
-  }
 };

 export default Message;
--- a/packages/message/src/main.vue
+++ b/packages/message/src/main.vue
@ -1,7 +1,7 @@
 <template>
  <transition name="el-message-fade">
-    <div class="el-message" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer" @mouseleave="startTimer">
-      <i class="el-message__icon" :class="[ typeClass ]"></i>
+    <div class="el-message" v-show="visible" @mouseenter="clearTimer" @mouseleave="startTimer">
+      <img class="el-message__icon" :src="typeImg" alt="">
      <div class="el-message__group">
        <p>{{ message }}</p>
        <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="handleClose"></div>
@ -11,13 +11,6 @@
 </template>

 <script type="text/babel">
-  let typeMap = {
-    success: 'circle-check',
-    info: 'information',
-    warning: 'warning',
-    error: 'circle-cross'
-  };
-
  export default {
    data() {
      return {
@ -28,14 +21,13 @@
        onClose: null,
        showClose: false,
        closed: false,
-        top: null,
        timer: null
      };
    },

    computed: {
-      typeClass() {
-        return typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : 'el-icon-information';
+      typeImg() {
+        return require(`../assets/${ this.type }.svg`);
      }
    },

--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@ -234,10 +234,8 @@
            this.inputLength = 20;
          }
        } else {
-          if (val.value) {
-            this.$emit('input', val.value);
-            this.$emit('change', val.value);
-          }
+          this.$emit('input', val.value);
+          this.$emit('change', val.value);
        }
      },

--- a/packages/switch/src/component.vue
+++ b/packages/switch/src/component.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText, 'el-switch--color': onColor || offColor }">
+  <div class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText }">
    <div class="el-switch__mask" v-show="disabled"></div>
    <input class="el-switch__input" type="checkbox" v-model="value" :name="name" :disabled="disabled" style="display: none;">
    <span class="el-switch__core" ref="core" @click="handleMiscClick" :style="{ 'width': coreWidth + 'px' }">
@ -102,13 +102,8 @@
        this.$refs.button.style.transform = this.value ? `translate3d(${ this.coreWidth - 20 }px, 2px, 0)` : 'translate3d(2px, 2px, 0)';
      },
      handleCoreColor() {
-        if (this.value) {
-          this.$refs.core.style.borderColor = this.onColor;
-          this.$refs.core.style.backgroundColor = this.onColor;
-        } else {
-          this.$refs.core.style.borderColor = this.offColor;
-          this.$refs.core.style.backgroundColor = this.offColor;
-        }
+        this.$refs.core.style.borderColor = this.value ? this.onColor : this.offColor;
+        this.$refs.core.style.backgroundColor = this.value ? this.onColor : this.offColor;
      }
    },
    mounted() {
--- a/packages/theme-default/src/message.css
+++ b/packages/theme-default/src/message.css
@ -5,36 +5,38 @@

  @b message {
    box-shadow:0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
-    width: 300px;
+    min-width: 300px;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 2px;
    position: fixed;
    left: 50%;
+    top: 20px;
    transform: translateX(-50%);
    background-color: #fff;
-    transition: opacity 0.3s, top 0.4s;
+    transition: opacity 0.3s, transform .4s;
    overflow: hidden;
    z-index: var(--index-popper);

    @e group {
-      margin-left: 28px;
+      margin-left: 38px;
      position: relative;

      & p {
        font-size: 14px;
        line-height: 20px;
-        margin: 0 20px 0 0;
+        margin: 0 34px 0 0;
+        white-space: nowrap;
        color: #8492a6;
        text-align: justify;
      }
    }

    @e icon {
-      size: 20px;
-      font-size: 20px;
-      float: left;
-      position: relative;
+      size: 40px;
+      position: absolute;
+      left: 0;
+      top: 0;
    }

    @e closeBtn {
@ -68,5 +70,6 @@
  .el-message-fade-enter,
  .el-message-fade-leave-active {
    opacity: 0;
+    transform: translate(-50%, -100%);
  }
 }