From 3fddf205cf450f596b2288b6670ce2ee86150fe6 Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Mon, 19 Oct 2020 14:26:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=BC=94=E7=A4=BA=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ExampleNotice/index.js | 21 ++++++++++++++
 src/components/ExampleNotice/main.vue | 42 +++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 src/components/ExampleNotice/index.js
 create mode 100644 src/components/ExampleNotice/main.vue

diff --git a/src/components/ExampleNotice/index.js b/src/components/ExampleNotice/index.js
new file mode 100644
index 00000000..47154ce0
--- /dev/null
+++ b/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
+    }
+}
diff --git a/src/components/ExampleNotice/main.vue b/src/components/ExampleNotice/main.vue
new file mode 100644
index 00000000..b02a0c65
--- /dev/null
+++ b/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>