add message

examples/docs/message.md

@@ -2,69 +2,68 @@
   module.exports = {
     methods: {
       open() {
-        this.$notify({
-          title: '标题名称',
-          message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
+        this.$message({
+          message: '这是一条消息提示'
         });
       },
       
       open2() {
-        this.$notify({
-          title: '成功',
-          message: '这是一条成功的提示消息',
+        this.$message({
+          message: '恭喜你，这是一条成功消息',
           type: 'success'
         });
       },
       
       open3() {
-        this.$notify({
-          title: '警告',
-          message: '这是一条警告的提示消息',
+        this.$message({
+          message: '警告哦，这是一条警告消息',
           type: 'warning'
         });
       },
             
       open4() {
-        this.$notify({
-          title: '消息',
-          message: '这是一条消息的提示消息',
-          type: 'info'
+        this.$message({
+          message: '错了哦，这是一条错误消息',
+          type: 'error'
         });
       },
                   
       open5() {
-        this.$notify({
-          title: '错误',
-          message: '这是一条错误的提示消息',
-          type: 'error'
+        this.$message({
+          showClose: true,
+          message: '恭喜你，这是一条成功消息'
         });
       },
       
       open6() {
-        this.$notify({
-          title: '提示',
-          message: '这是一条不会自动关闭的消息',
-          duration: 0
+        this.$message({
+          showClose: true,
+          message: '警告哦，这是一条警告消息',
+          type: 'warning'
         });
       },
-      
+            
       open7() {
-        this.$notify({
-          title: '提示',
-          message: '这是一条带有回调函数的消息',
-          onClose: this.onClose
+        this.$message({
+          showClose: true,
+          message: '错了哦，这是一条错误消息',
+          type: 'error'
         });
       },
       
-      onClose() {
-        console.log('Notification 已关闭');
-      }
+      open8() {
+        this.$message({
+          showClose: true,
+          message: '错了哦，这是一条错误消息',
+          type: 'error'
+        });
+      } 
     }
   };
 </script>
 
 <style>
-  .demo-box.demo-notification {
+  .demo-box.demo-message {
     .el-button + .el-button {
       margin-left: 10px;
     }
@@ -73,22 +72,21 @@
 
 ## 基本用法
 
-<div class="demo-box demo-notification">
-  <el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
+<div class="demo-box demo-message">
+  <el-button :plain="true" v-on:click.native="open">打开消息提示</el-button>
 </div>
 
 ```html
 <template>
-  <el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open">打开消息提示</el-button>
 </template>
 
 <script>
   export default {
     methods: {
       open() {
-        this.$notify({
-          title: '标题名称',
-          message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
+        this.$message({
+          message: '这是一条消息提示'
         });
       }
     }
@@ -96,54 +94,40 @@
 </script>
 ```
 
-## 带有 icon
-
-<div class="demo-box demo-notification">
+## 不同状态
+<div class="demo-box demo-message">
   <el-button :plain="true" v-on:click.native="open2">成功</el-button>
   <el-button :plain="true" v-on:click.native="open3">警告</el-button>
-  <el-button :plain="true" v-on:click.native="open4">消息</el-button>
-  <el-button :plain="true" v-on:click.native="open5">错误</el-button>
+  <el-button :plain="true" v-on:click.native="open4">错误</el-button>
 </div>
 
 ```html
 <template>
   <el-button :plain="true" v-on:click.native="open2">成功</el-button>
   <el-button :plain="true" v-on:click.native="open3">警告</el-button>
-  <el-button :plain="true" v-on:click.native="open4">消息</el-button>
-  <el-button :plain="true" v-on:click.native="open5">错误</el-button>
+  <el-button :plain="true" v-on:click.native="open4">错误</el-button>
 </template>
 
 <script>
   export default {
     methods: {
       open2() {
-        this.$notify({
-          title: '成功',
-          message: '这是一条成功的提示消息',
+        this.$message({
+          message: '恭喜你，这是一条成功消息',
           type: 'success'
         });
       },
       
       open3() {
-        this.$notify({
-          title: '警告',
-          message: '这是一条警告的提示消息',
+        this.$message({
+          message: '警告哦，这是一条警告消息',
           type: 'warning'
         });
       },
             
       open4() {
-        this.$notify({
-          title: '消息',
-          message: '这是一条消息的提示消息',
-          type: 'info'
-        });
-      },
-                  
-      open5() {
-        this.$notify({
-          title: '错误',
-          message: '这是一条错误的提示消息',
+        this.$message({
+          message: '错了哦，这是一条错误消息',
           type: 'error'
         });
       }
@@ -152,54 +136,54 @@
 </script>
 ```
 
-## 不会自动关闭
-<div class="demo-box demo-notification">
-  <el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
+## 可关闭
+<div class="demo-box demo-message">
+  <el-button :plain="true" v-on:click.native="open5">消息</el-button>
+  <el-button :plain="true" v-on:click.native="open6">成功</el-button>
+  <el-button :plain="true" v-on:click.native="open7">警告</el-button>
+  <el-button :plain="true" v-on:click.native="open8">错误</el-button>
 </div>
 
 ```html
 <template>
-  <el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open5">消息</el-button>
+  <el-button :plain="true" v-on:click.native="open6">成功</el-button>
+  <el-button :plain="true" v-on:click.native="open7">警告</el-button>
+  <el-button :plain="true" v-on:click.native="open8">错误</el-button>
 </template>
 
 <script>
   export default {
     methods: {
+      open5() {
+        this.$message({
+          showClose: true,
+          message: '恭喜你，这是一条成功消息'
+        });
+      },
+      
       open6() {
-        this.$notify({
-          title: '提示',
-          message: '这是一条不会自动关闭的消息',
-          duration: 0
+        this.$message({
+          showClose: true,
+          message: '警告哦，这是一条警告消息',
+          type: 'warning'
         });
-      }
-    }
-  }
-</script>
-```
-
-## 回调函数
-<div class="demo-box demo-notification">
-  <el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
-</div>
-
-```html
-<template>
-  <el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
-</template>
-
-<script>
-  export default {
-    methods: {
+      },
+            
       open7() {
-        this.$notify({
-          title: '提示',
-          message: '这是一条带有回调函数的消息',
-          onClose: this.onClose
+        this.$message({
+          showClose: true,
+          message: '错了哦，这是一条错误消息',
+          type: 'error'
         });
       },
       
-      onClose() {
-        console.log('Notification 已关闭');
+      open8() {
+        this.$message({
+          showClose: true,
+          message: '错了哦，这是一条错误消息',
+          type: 'error'
+        });
       }
     }
   }
@@ -208,23 +192,23 @@
 
 ## 全局方法
 
-element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 `Notification`。
+element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。
 
 ## 单独引用
 
-单独引入 `Notification`：
+单独引入 `Message`：
 
 ```javascript
-import { Notification } from 'element-ui';
+import { Message } from 'element-ui';
 ```
 
-此时调用方法为 `Notification(options)`。
+此时调用方法为 `Message(options)`。
 
 ## API
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| title | 标题 | string | | |
-| message | 说明文字 | string | | |
-| type | 主题 | string | 'success', 'warning', 'info', 'error' | |
-| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 4500 |
-| onClose | 关闭时的回调函数 | function | | |
+| message | 消息文字 | string | | |
+| type | 主题 | string | 'success', 'warning', 'info', 'error' | 'info' |
+| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 3000 |
+| showClose | 是否显示关闭按钮 | boolean | | false |
+| onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | | |

examples/docs/select.md

@@ -4,36 +4,36 @@
       return {
         options: [{
           value: '选项1',
-          label: '标签1'
+          label: '黄金糕'
         }, {
           value: '选项2',
-          label: '标签2'
+          label: '双皮奶'
         }, {
           value: '选项3',
-          label: '标签3'
+          label: '蚵仔煎'
         }, {
           value: '选项4',
-          label: '标签4'
+          label: '龙须面'
         }, {
           value: '选项5',
-          label: '标签5'
+          label: '北京烤鸭'
         }],
         options2: [{
           value: '选项1',
-          label: '标签1'
+          label: '黄金糕'
         }, {
           value: '选项2',
-          label: '标签2',
+          label: '双皮奶',
           disabled: true
         }, {
           value: '选项3',
-          label: '标签3'
+          label: '蚵仔煎'
         }, {
           value: '选项4',
-          label: '标签4'
+          label: '龙须面'
         }, {
           value: '选项5',
-          label: '标签5'
+          label: '北京烤鸭'
         }],
         options3: [{
           label: '分组1',
@@ -59,39 +59,58 @@
         }],
         options4: [{
           value: '选项1',
-          label: '标签1'
+          label: '黄金糕'
         }, {
           value: '选项2',
-          label: '标签2'
+          label: '双皮奶'
         }, {
           value: '选项3',
-          label: '标签3'
+          label: '蚵仔煎'
         }, {
           value: '选项4',
-          label: '标签4'
+          label: '龙须面'
         }, {
           value: '选项5',
-          label: '标签5'
+          label: '北京烤鸭'
         }, {
           value: '选项6',
-          label: '标签6'
+          label: '炸酱面'
         }, {
           value: '选项7',
-          label: '标签7'
+          label: '羊蝎子'
         }, {
           value: '选项8',
-          label: '标签8'
+          label: '肉夹馍'
         }, {
           value: '选项9',
-          label: '标签9'
+          label: '回锅肉'
         }, {
           value: '选项10',
-          label: '标签10'
+          label: '小笼包'
         }, {
           value: '选项11',
-          label: '标签11'
+          label: '红烧肉'
         }],
         options5: [],
+        cities: [{
+          value: 'Beijing',
+          label: '北京'
+        }, {
+          value: 'Shanghai',
+          label: '上海'
+        }, {
+          value: 'Nanjing',
+          label: '南京'
+        }, {
+          value: 'Chengdu',
+          label: '成都'
+        }, {
+          value: 'Shenzhen',
+          label: '深圳'
+        }, {
+          value: 'Guangzhou',
+          label: '广州'
+        }],
         value: '',
         value2: '',
         value3: '',
@@ -392,10 +411,11 @@
 
 <el-select v-model="value6">
   <el-option
-    v-for="item in options"
+    v-for="item in cities"
     :label="item.label"
     :value="item.value">
-    <span>label: {{ item.label }}, value: {{ item.value }}</span>
+    <span style="float: left">{{ item.label }}</span>
+    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
   </el-option>
 </el-select>
 
@@ -403,10 +423,11 @@
 <template>
   <el-select v-model="value6">
     <el-option
-      v-for="item in options"
+      v-for="item in cities"
       :label="item.label"
       :value="item.value">
-      <span>label: {{ item.label }}, value: {{ item.value }}</span>
+      <span style="float: left">{{ item.label }}</span>
+      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
     </el-option>
   </el-select>
 </template>
@@ -415,21 +436,24 @@
   export default {
     data() {
       return {
-        options: [{
-          value: '选项1',
-          label: '标签1'
+        cities: [{
+          value: 'Beijing',
+          label: '北京'
         }, {
-          value: '选项2',
-          label: '标签2'
+          value: 'Shanghai',
+          label: '上海'
         }, {
-          value: '选项3',
-          label: '标签3'
+          value: 'Nanjing',
+          label: '南京'
         }, {
-          value: '选项4',
-          label: '标签4'
+          value: 'Chengdu',
+          label: '成都'
         }, {
-          value: '选项5',
-          label: '标签5'
+          value: 'Shenzhen',
+          label: '深圳'
+        }, {
+          value: 'Guangzhou',
+          label: '广州'
         }],
         value6: ''
       }

packages/message/src/main.js

@@ -25,9 +25,9 @@ var Message = function(options) {
 
   let topDist = 0;
   for (let i = 0, len = instances.length; i < len; i++) {
-    topDist += instances[i].$el.offsetHeight + 16;
+    topDist += instances[i].$el.offsetHeight + 20;
   }
-  topDist += 16;
+  topDist += 20;
   instance.top = topDist;
   instances.push(instance);
 };
@@ -49,7 +49,7 @@ Message.close = function(id, userOnClose) {
 
   if (len > 1) {
     for (i = index; i < len - 1 ; i++) {
-      instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 16 + 'px';
+      instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 20 + 'px';
     }
   }
 };

packages/message/src/main.vue

@@ -1,11 +1,10 @@
 <template>
-  <transition name="el-notification-fade">
-    <div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
-      <i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
-      <div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
-        <span>{{ title }}</span>
+  <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__group">
         <p>{{ message }}</p>
-        <div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
+        <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="handleClose"></div>
       </div>
     </div>
   </transition>
@@ -23,12 +22,11 @@
     data() {
       return {
         visible: false,
-        title: '',
         message: '',
-        duration: 4500,
-        type: '',
+        duration: 3000,
+        type: 'info',
         onClose: null,
-
+        showClose: false,
         closed: false,
         top: null,
         timer: null
@@ -37,7 +35,7 @@
 
     computed: {
       typeClass() {
-        return this.type ? `el-icon-${ typeMap[this.type] }` : '';
+        return `el-icon-${ typeMap[this.type] }`;
       }
     },
 
@@ -77,13 +75,7 @@
     },
 
     mounted() {
-      if (this.duration > 0) {
-        this.timer = setTimeout(() => {
-          if (!this.closed) {
-            this.handleClose();
-          }
-        }, this.duration);
-      }
+      this.startTimer();
     }
   };
 </script>

packages/select/src/select.vue

@@ -281,6 +281,7 @@
 
       visible(val) {
         if (!val) {
+          this.$refs.reference.$el.querySelector('input').blur();
           this.$el.querySelector('.el-input__icon').classList.remove('is-reverse');
           this.broadcast('select-dropdown', 'destroyPopper');
           if (this.$refs.input) {
@@ -423,6 +424,9 @@
       },
 
       toggleMenu() {
+        if (this.filterable && this.query === '' && this.visible) {
+          return;
+        }
         if (!this.disabled) {
           this.visible = !this.visible;
           if (this.remote && this.visible) {
@@ -472,7 +476,9 @@
       },
 
       selectOption() {
-        this.handleOptionSelect(this.options[this.hoverIndex]);
+        if (this.options[this.hoverIndex]) {
+          this.handleOptionSelect(this.options[this.hoverIndex]);
+        }
       },
 
       deleteSelected(event) {

packages/theme-default/src/index.css

@@ -15,6 +15,7 @@
 @import "./popover.css";
 @import "./tooltip.css";
 @import "./autocomplete.css";
+@import "./message.css";
 @import "./message-box.css";
 @import "./date-picker.css";
 @import "./time-picker.css";

packages/theme-default/src/message.css

@@ -0,0 +1,72 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b message {
+    box-shadow:0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+    width: 300px;
+    padding: 10px 12px;
+    box-sizing: border-box;
+    border-radius: 2px;
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #fff;
+    transition: opacity 0.3s, top 0.4s;
+    overflow: hidden;
+    z-index: 1000;
+
+    @e group {
+      margin-left: 28px;
+      position: relative;
+
+      & p {
+        font-size: 14px;
+        line-height: 20px;
+        margin: 0 20px 0 0;
+        color: #8492a6;
+        text-align: justify;
+      }
+    }
+
+    @e icon {
+      size: 20px;
+      font-size: 20px;
+      float: left;
+      position: relative;
+    }
+
+    @e closeBtn {
+      position: absolute 3px 0 * *;
+      cursor: pointer;
+      color: #C0CCDA;
+      font-size: 14px;
+
+      &:hover {
+        color: #99A9BF;
+      }
+    }
+
+    & .el-icon-circle-check {
+      color: #13ce66;
+    }
+
+    & .el-icon-circle-cross {
+      color: #ff4949;
+    }
+
+    & .el-icon-information {
+      color: #50bfff;
+    }
+
+    & .el-icon-warning {
+      color: #f7ba2a;
+    }
+  }
+
+  .el-message-fade-enter,
+  .el-message-fade-leave-active {
+    opacity: 0;
+  }
+}