修改提示信息文字

examples/containers/NormalDialog.vue

@@ -39,7 +39,10 @@
         </form-line>
       </form-area>
       <div slot="footer">
-        <el-button type="primary">确定</el-button>
+        <el-button
+          type="primary"
+          @click="showMessage"
+        >确定</el-button>
         <el-button>取消</el-button>
       </div>
     </normal-dialog>
@@ -69,6 +72,9 @@ export default {
     closeHandle(done) {
       done();
     },
+    showMessage() {
+      this.$message.info('123123');
+    },
   },
 };
 </script>

package.json

 {
   "name": "rym-element-ui",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "description": "任意门组件库",
   "main": "lib/rymUi.common.js",
   "scripts": {

src/components/Dialog/NormalDialog.vue

@@ -95,6 +95,10 @@ export default {
     right: -20px;
     width: 39px;
     height: 39px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
   .el-dialog__body {
     padding: 20px 40px;

src/components/Message/Message.js

+import Vue from 'vue';
+import Main from './Message.vue';
+import PopupManager  from '../Popup/popup-manager';
+import { isVNode } from 'element-ui/src/utils/vdom';
+let MessageConstructor = Vue.extend(Main);
+
+let instance;
+let instances = [];
+let seed = 1;
+
+const Message = function(options) {
+  if (Vue.prototype.$isServer) return;
+  options = options || {};
+  if (typeof options === 'string') {
+    options = {
+      message: options
+    };
+  }
+  let userOnClose = options.onClose;
+  let id = 'message_' + seed++;
+
+  options.onClose = function() {
+    Message.close(id, userOnClose);
+  };
+  instance = new MessageConstructor({
+    data: options
+  });
+  instance.id = id;
+  if (isVNode(instance.message)) {
+    instance.$slots.default = [instance.message];
+    instance.message = null;
+  }
+  instance.vm = instance.$mount();
+  document.body.appendChild(instance.vm.$el);
+  instance.vm.visible = true;
+  instance.dom = instance.vm.$el;
+  instance.dom.style.zIndex = PopupManager.nextZIndex();
+  instances.push(instance);
+  return instance.vm;
+};
+
+['success', 'warning', 'info', 'error'].forEach(type => {
+  Message[type] = options => {
+    if (typeof options === 'string') {
+      options = {
+        message: options
+      };
+    }
+    options.type = type;
+    return Message(options);
+  };
+});
+
+Message.close = function(id, userOnClose) {
+  for (let i = 0, len = instances.length; i < len; i++) {
+    if (id === instances[i].id) {
+      if (typeof userOnClose === 'function') {
+        userOnClose(instances[i]);
+      }
+      instances.splice(i, 1);
+      break;
+    }
+  }
+};
+
+Message.closeAll = function() {
+  for (let i = instances.length - 1; i >= 0; i--) {
+    instances[i].close();
+  }
+};
+
+export default Message;

src/components/Message/Message.vue

+<template>
+  <transition name="el-message-fade">
+    <div
+      :class="[
+        'el-message',
+        type && !iconClass ? `el-message--${ type }` : '',
+        center ? 'is-center' : '',
+        showClose ? 'is-closable' : '',
+        customClass
+      ]"
+      v-show="visible"
+      @mouseenter="clearTimer"
+      @mouseleave="startTimer"
+      role="alert">
+      <i :class="iconClass" v-if="iconClass"></i>
+      <i :class="typeClass" v-else></i>
+      <slot>
+        <p v-if="!dangerouslyUseHTMLString" class="el-message__content">{{ message }}</p>
+        <p v-else v-html="message" class="el-message__content"></p>
+      </slot>
+      <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></i>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  const typeMap = {
+    success: 'success',
+    info: 'info',
+    warning: 'warning',
+    error: 'error'
+  };
+
+  export default {
+    data() {
+      return {
+        visible: false,
+        message: '',
+        duration: 3000,
+        type: 'info',
+        iconClass: '',
+        customClass: '',
+        onClose: null,
+        showClose: false,
+        closed: false,
+        timer: null,
+        dangerouslyUseHTMLString: false,
+        center: false
+      };
+    },
+
+    computed: {
+      typeClass() {
+        return this.type && !this.iconClass
+          ? `el-message__icon el-icon-${ typeMap[this.type] }`
+          : '';
+      }
+    },
+
+    watch: {
+      closed(newVal) {
+        if (newVal) {
+          this.visible = false;
+          this.$el.addEventListener('transitionend', this.destroyElement);
+        }
+      }
+    },
+
+    methods: {
+      destroyElement() {
+        this.$el.removeEventListener('transitionend', this.destroyElement);
+        this.$destroy(true);
+        this.$el.parentNode.removeChild(this.$el);
+      },
+
+      close() {
+        this.closed = true;
+        if (typeof this.onClose === 'function') {
+          this.onClose(this);
+        }
+      },
+
+      clearTimer() {
+        clearTimeout(this.timer);
+      },
+
+      startTimer() {
+        if (this.duration > 0) {
+          this.timer = setTimeout(() => {
+            if (!this.closed) {
+              this.close();
+            }
+          }, this.duration);
+        }
+      },
+      keydown(e) {
+        if (e.keyCode === 27) { // esc关闭消息
+          if (!this.closed) {
+            this.close();
+          }
+        }
+      }
+    },
+    mounted() {
+      this.startTimer();
+      document.addEventListener('keydown', this.keydown);
+    },
+    beforeDestroy() {
+      document.removeEventListener('keydown', this.keydown);
+    }
+  };
+</script>

src/components/Message/index.js

+import Message from './Message';
+
+export default Message;

src/index.js

@@ -15,6 +15,7 @@ import FormArea from './components/FormArea/index';
 import FormLine from './components/FormLine/index';
 import FormItem from './components/FormItem/index';
 import Transfer from './components/Transfer/index';
+import Message from './components/Message/index';
 
 const install = Vue => {
   // Layout
@@ -33,6 +34,8 @@ const install = Vue => {
   Vue.component(FormLine.name, FormLine);
   Vue.component(FormItem.name, FormItem);
   Vue.component(Transfer.name, Transfer);
+  Vue.prototype.$message = Message;
+
   // Element-ui
   Vue.component(Select.name, Select);
   Vue.component(Option.name, Option);