更新演示组件

src/components/ExampleNotice/index.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+
+const component = require('./main.vue').default
+const constructor = Vue.extend(component)
+
+const exampleNotice = options => {
+    options = options || {}
+    let instance = new constructor({
+        data: options
+    })
+    instance.vm = instance.$mount()
+    instance.dom = instance.vm.$el
+    document.body.appendChild(instance.dom)
+    return instance.vm
+}
+
+export default {
+    install: Vue => {
+        Vue.prototype[`$${component.name}`] = exampleNotice
+    }
+}

src/components/ExampleNotice/main.vue

@@ -0,0 +1,42 @@
+<template>
+    <transition name="notice">
+        <div v-if="show" class="notice">
+            {{ content }}
+        </div>
+    </transition>
+</template>
+
+<script>
+export default {
+    name: 'ExampleNotice',
+    data() {
+        return {
+            show: false,
+            content: ''
+        }
+    },
+    mounted() {
+        this.show = true
+        setTimeout(() => {
+            this.show = false
+        }, 2000)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.notice {
+    padding: 10px;
+    background-color: #eee;
+    border-radius: 10px;
+    @include position-center(xy);
+}
+.notice-leave-active,
+.notice-enter-active {
+    transition: all 0.3s;
+}
+.notice-enter,
+.notice-leave-to {
+    opacity: 0;
+}
+</style>