| 1 | <template>
|
| 2 | <transition name="el-notification-fade">
|
| 3 | <div
|
| 4 | :class="['el-notification', customClass, horizontalClass]"
|
| 5 | v-show="visible"
|
| 6 | :style="positionStyle"
|
| 7 | @mouseenter="clearTimer()"
|
| 8 | @mouseleave="startTimer()"
|
| 9 | @click="click"
|
| 10 | role="alert"
|
| 11 | >
|
| 12 | <i
|
| 13 | class="el-notification__icon"
|
| 14 | :class="[ typeClass, iconClass ]"
|
| 15 | v-if="type || iconClass">
|
| 16 | </i>
|
| 17 | <div class="el-notification__group" :class="{ 'is-with-icon': typeClass || iconClass }">
|
| 18 | <h2 class="el-notification__title" v-text="title"></h2>
|
| 19 | <div class="el-notification__content" v-show="message">
|
| 20 | <slot>
|
| 21 | <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
|
| 22 | <p v-else v-html="message"></p>
|
| 23 | </slot>
|
| 24 | </div>
|
| 25 | <div
|
| 26 | class="el-notification__closeBtn el-icon-close"
|
| 27 | v-if="showClose"
|
| 28 | @click.stop="close"></div>
|
| 29 | </div>
|
| 30 | </div>
|
| 31 | </transition>
|
| 32 | </template>
|
| 33 |
|
| 34 | <script type="text/babel">
|
| 35 | let typeMap = {
|
| 36 | success: 'success',
|
| 37 | info: 'info',
|
| 38 | warning: 'warning',
|
| 39 | error: 'error'
|
| 40 | };
|
| 41 |
|
| 42 | export default {
|
| 43 | data() {
|
| 44 | return {
|
| 45 | visible: false,
|
| 46 | title: '',
|
| 47 | message: '',
|
| 48 | duration: 4500,
|
| 49 | type: '',
|
| 50 | showClose: true,
|
| 51 | customClass: '',
|
| 52 | iconClass: '',
|
| 53 | onClose: null,
|
| 54 | onClick: null,
|
| 55 | closed: false,
|
| 56 | verticalOffset: 0,
|
| 57 | timer: null,
|
| 58 | dangerouslyUseHTMLString: false,
|
| 59 | position: 'top-right'
|
| 60 | };
|
| 61 | },
|
| 62 |
|
| 63 | computed: {
|
| 64 | typeClass() {
|
| 65 | return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
|
| 66 | },
|
| 67 |
|
| 68 | horizontalClass() {
|
| 69 | return this.position.indexOf('right') > -1 ? 'right' : 'left';
|
| 70 | },
|
| 71 |
|
| 72 | verticalProperty() {
|
| 73 | return /^top-/.test(this.position) ? 'top' : 'bottom';
|
| 74 | },
|
| 75 |
|
| 76 | positionStyle() {
|
| 77 | return {
|
| 78 | [this.verticalProperty]: `${ this.verticalOffset }px`
|
| 79 | };
|
| 80 | }
|
| 81 | },
|
| 82 |
|
| 83 | watch: {
|
| 84 | closed(newVal) {
|
| 85 | if (newVal) {
|
| 86 | this.visible = false;
|
| 87 | this.$el.addEventListener('transitionend', this.destroyElement);
|
| 88 | }
|
| 89 | }
|
| 90 | },
|
| 91 |
|
| 92 | methods: {
|
| 93 | destroyElement() {
|
| 94 | this.$el.removeEventListener('transitionend', this.destroyElement);
|
| 95 | this.$destroy(true);
|
| 96 | this.$el.parentNode.removeChild(this.$el);
|
| 97 | },
|
| 98 |
|
| 99 | click() {
|
| 100 | if (typeof this.onClick === 'function') {
|
| 101 | this.onClick();
|
| 102 | }
|
| 103 | },
|
| 104 |
|
| 105 | close() {
|
| 106 | this.closed = true;
|
| 107 | if (typeof this.onClose === 'function') {
|
| 108 | this.onClose();
|
| 109 | }
|
| 110 | },
|
| 111 |
|
| 112 | clearTimer() {
|
| 113 | clearTimeout(this.timer);
|
| 114 | },
|
| 115 |
|
| 116 | startTimer() {
|
| 117 | if (this.duration > 0) {
|
| 118 | this.timer = setTimeout(() => {
|
| 119 | if (!this.closed) {
|
| 120 | this.close();
|
| 121 | }
|
| 122 | }, this.duration);
|
| 123 | }
|
| 124 | },
|
| 125 | keydown(e) {
|
| 126 | if (e.keyCode === 46 || e.keyCode === 8) {
|
| 127 | this.clearTimer();
|
| 128 | } else if (e.keyCode === 27) {
|
| 129 | if (!this.closed) {
|
| 130 | this.close();
|
| 131 | }
|
| 132 | } else {
|
| 133 | this.startTimer();
|
| 134 | }
|
| 135 | }
|
| 136 | },
|
| 137 | mounted() {
|
| 138 | if (this.duration > 0) {
|
| 139 | this.timer = setTimeout(() => {
|
| 140 | if (!this.closed) {
|
| 141 | this.close();
|
| 142 | }
|
| 143 | }, this.duration);
|
| 144 | }
|
| 145 | document.addEventListener('keydown', this.keydown);
|
| 146 | },
|
| 147 | beforeDestroy() {
|
| 148 | document.removeEventListener('keydown', this.keydown);
|
| 149 | }
|
| 150 | };
|
| 151 | </script>
|
| 152 |
|