1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import Component from '@ember/component'; import layout from '../templates/components/el-message'; import {computed, get} from "@ember/object"; import {htmlSafe} from '@ember/template'; import {inject as service} from '@ember/service'; export default Component.extend({ layout, messagesService: service('message'), messageObj: null, classNames: ['el-message', 'animated'], classNameBindings: ['getClassName', 'messageObj.center:is-center', 'messageObj.showClose:is-closable', ], attributeBindings: ['role'], role: 'alert', getClassName: computed('messageObj.{type,iconClass,customClass,dismiss}', function () { let classNames = ''; if (get(this, 'messageObj.type') && !get(this, 'messageObj.iconClass')) { classNames += ` el-message--${get(this, 'messageObj.type')}`; } if (get(this, 'messageObj.dismiss')) { classNames += ` fadeOutUpElCustom `; }else{ classNames += ` fadeInDownElCustom `; } return classNames; }), typeClass: computed('messageObj.{type,iconClass}', function () { let typeMap = { success: 'success', info: 'info', warning: 'warning', error: 'error' }; return get(this, 'messageObj.type') && !get(this, 'messageObj.iconClass') ? `el-message__icon el-icon-${ typeMap[get(this, 'messageObj.type')] }` : ''; }), messageHTML: computed('messageObj.message', function () { return htmlSafe(get(this, 'messageObj.message')); }), actions: { close() { this.close(); }, }, close() { get(this, 'messagesService').removeMessage(get(this, 'messageObj')); }, mouseEnter() { if (get(this, 'messageObj.autoClear')) { get(this, 'messagesService').clearTimer(get(this, 'messageObj')); } }, mouseLeave() { if (get(this, 'messageObj.autoClear')) { get(this, 'messagesService').startTimer(get(this, 'messageObj')); } }, }); |