<template> <transition name="el-message-fade" @after-leave="handleAfterLeave"> <div :class="[ 'el-message', 'app-notice', type && !iconClass ? `el-message--${ type }` : '', center ? 'is-center' : '', showClose ? 'is-closable' : '', customClass ]" :style="positionStyle" 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, verticalOffset: 20, timer: null, dangerouslyUseHTMLString: false, center: false, position: 'top' }; }, computed: { typeClass() { return this.type && !this.iconClass ? `el-message__icon el-icon-${ typeMap[this.type] }` : ''; }, verticalProperty() { return /^top/.test(this.position) ? 'top' : 'bottom'; }, positionStyle() { return { [this.verticalProperty]: `${ this.verticalOffset }px` }; }, }, watch: { closed(newVal) { if (newVal) { this.visible = false; } } }, methods: { handleAfterLeave() { 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> <style lang="less"> // el-message样式修改 .el-message.app-notice{ padding: 7px 8px; min-width: 100px; .el-message__icon{ font-size: 28px; } .el-message__content{ color: #fff; font-family: "Microsoft YaHei"; line-height: 20px; } } // 配色修改 .app-notice.el-message--error{ background-color: #f56c6c; border-color:#f56c6c; .el-icon-error{ color: #fff; background-color: #f56c6c; } } .app-notice.el-message--warning{ background-color: #e6a23c; border-color:#e6a23c; .el-icon-warning{ color: #fff; background-color: #e6a23c; } } .app-notice.el-message--info{ background-color: #909399; border-color:#909399; .el-icon-info{ color: #fff; background-color: #909399; } } .app-notice.el-message--success{ background-color: #24b47e; border-color:#24b47e; .el-icon-success{ color: #fff; background-color: #24b47e; } } </style>