Modify the directory structure

Modify the directory structure

src/components/base/notification/index.js

@@ -0,0 +1,37 @@
+import Notification from './notification.vue';
+import Vue from 'vue';
+import { camelcaseToHyphen } from '../../../utils/assist';
+
+Notification.newInstance = properties => {
+    const _props = properties || {};
+
+    let props = '';
+    Object.keys(_props).forEach(prop => {
+        props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
+    });
+
+    const div = document.createElement('div');
+    div.innerHTML = `<notification${props}></notification>`;
+    document.body.appendChild(div);
+
+    const notification = new Vue({
+        el: div,
+        data: _props,
+        components: { Notification }
+    }).$children[0];
+
+    return {
+        notice (noticeProps) {
+            notification.add(noticeProps);
+        },
+        remove (key) {
+            notification.close(key);
+        },
+        component: notification,
+        destroy () {
+            document.body.removeChild(div);
+        }
+    }
+};
+
+export default Notification;

src/components/base/notification/notice.vue

@@ -0,0 +1,93 @@
+<template>
+    <div :class="classes" :style="style" :transition="transitionName">
+        <div :class="[`${baseClass}-content`]" v-el:content>{{{ content }}}</div>
+        <a :class="[`${baseClass}-close`]" @click="close" v-if="closable">
+            <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+        </a>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            prefixCls: {
+                type: String,
+                default: ''
+            },
+            duration: {
+                type: Number,
+                default: 1.5
+            },
+            content: {
+                type: String,
+                default: ''
+            },
+            style: {
+                type: Object,
+                default: function() {
+                    return {
+                        right: '50%'
+                    }
+                }
+            },
+            closable: {
+                type: Boolean,
+                default: false
+            },
+            className: {
+                type: String
+            },
+            key: {
+                type: String,
+                required: true
+            },
+            onClose: {
+                type: Function
+            },
+            transitionName: {
+                type: String
+            }
+        },
+        computed: {
+            baseClass () {
+                return `${this.prefixCls}-notice`;
+            },
+            classes () {
+                return [
+                    this.baseClass,
+                    {
+                        [`${this.className}`]: !!this.className,
+                        [`${this.baseClass}-closable`]: this.closable
+                    }
+                ]
+            },
+            contentClasses () {
+                return `${this.baseClass}-content`;
+            }
+        },
+        methods: {
+            clearCloseTimer () {
+                if (this.closeTimer) {
+                    clearTimeout(this.closeTimer);
+                    this.closeTimer = null;
+                }
+            },
+            close () {
+                this.clearCloseTimer();
+                this.onClose();
+                this.$parent.close(this.key);
+            }
+        },
+        compiled () {
+            this.clearCloseTimer();
+
+            if (this.duration !== 0) {
+                this.closeTimer = setTimeout(() => {
+                    this.close();
+                }, this.duration * 1000)
+            }
+        },
+        beforeDestroy () {
+            this.clearCloseTimer();
+        }
+    }
+</script>

src/components/base/notification/notification.vue

@@ -0,0 +1,92 @@
+<template>
+    <div :class="classes" :style="style">
+        <Notice v-for="notice in notices"
+            :prefix-cls="prefixCls"
+            :style="notice.style"
+            :content="notice.content"
+            :duration="notice.duration"
+            :closable="notice.closable"
+            :key="notice.key"
+            :transition-name="notice.transitionName"
+            :on-close="notice.onClose">
+        </Notice>
+    </div>
+</template>
+<script>
+    import Notice from './notice.vue';
+
+    const prefixCls = 'ivu-notification';
+    let seed = 0;
+    const now = Date.now();
+
+    function getUuid () {
+        return 'ivuNotification_' + now + '_' + (seed++);
+    }
+
+    export default {
+        components: { Notice },
+        props: {
+            prefixCls: {
+                type: String,
+                default: prefixCls
+            },
+            style: {
+                type: Object,
+                default: function () {
+                    return {
+                        top: '65px',
+                        left: '50%'
+                    }
+                }
+            },
+            content: {
+                type: String
+            },
+            className: {
+                type: String
+            }
+        },
+        data () {
+            return {
+                notices: []
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${this.prefixCls}`,
+                    {
+                        [`${this.className}`]: !!this.className
+                    }
+                ]
+            }
+        },
+        methods: {
+            add (notice) {
+                const key = notice.key || getUuid();
+
+                let _notice = Object.assign({
+                    style: {
+                        right: '50%'
+                    },
+                    content: '',
+                    duration: 1.5,
+                    closable: false,
+                    key: key
+                }, notice);
+
+                this.notices.push(_notice);
+            },
+            close (key) {
+                const notices = this.notices;
+
+                for (let i = 0; i < notices.length; i++) {
+                    if (notices[i].key === key) {
+                        this.notices.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+        }
+    }
+</script>

src/components/base/popper.js

@@ -0,0 +1,101 @@
+/**
+ * https://github.com/freeze-component/vue-popper
+ * */
+import Popper from 'popper.js';
+
+export default {
+    props: {
+        placement: {
+            type: String,
+            default: 'bottom'
+        },
+        boundariesPadding: {
+            type: Number,
+            default: 5
+        },
+        reference: Object,
+        popper: Object,
+        offset: {
+            default: 0
+        },
+        value: Boolean,
+        transition: String,
+        options: {
+            type: Object,
+            default () {
+                return {
+                    gpuAcceleration: false,
+                    boundariesElement: 'body'
+                }
+            }
+        },
+        visible: {
+            type: Boolean,
+            default: false
+        }
+    },
+    watch: {
+        value: {
+            immediate: true,
+            handler(val) {
+                this.visible = val;
+                this.$emit('input', val);
+            }
+        },
+        visible(val) {
+            val ? this.updatePopper() : this.destroyPopper();
+            this.$emit('input', val);
+        }
+    },
+    methods: {
+        createPopper() {
+            if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
+                return;
+            }
+
+            const options = this.options;
+            const popper = this.popper || this.$els.popper;
+            const reference = this.reference || this.$els.reference;
+
+            if (!popper || !reference) return;
+
+            if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
+                this.popperJS.destroy();
+            }
+
+            options.placement = this.placement;
+            options.offset = this.offset;
+
+            this.popperJS = new Popper(reference, popper, options);
+            this.popperJS.onCreate(popper => {
+                this.resetTransformOrigin(popper);
+                this.$nextTick(this.updatePopper);
+                this.$emit('created', this);
+            });
+        },
+        updatePopper() {
+            this.popperJS ? this.popperJS.update() : this.createPopper();
+        },
+        doDestroy() {
+            if (this.visible) return;
+            this.popperJS.destroy();
+            this.popperJS = null;
+        },
+        destroyPopper() {
+            if (this.popperJS) {
+                this.resetTransformOrigin(this.popperJS);
+            }
+        },
+        resetTransformOrigin(popper) {
+            let placementMap = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'};
+            let placement = popper._popper.getAttribute('x-placement').split('-')[0];
+            let origin = placementMap[placement];
+            popper._popper.style.transformOrigin = ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`;
+        }
+    },
+    beforeDestroy() {
+        if (this.popperJS) {
+            this.popperJS.destroy();
+        }
+    }
+};