chore: add alert plugin for docs; 🌟

docs/.vuepress/components/Alert.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="alert" :style="`top: ${top}px`">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Alert',
+    props: ['show'],
+    data() {
+      return {
+        top: 100
+      }
+    },
+    mounted() {
+      console.log(this)
+      // this.$page.alert = this.$page.alert ? this.$page.alert : {top: 100}
+      // this.$page.alert.top += 20
+      // this.top = this.$page.alert.top
+      setTimeout(() => {
+        this.$el.remove()
+      }, 1000)
+    }
+  }
+</script>
+
+<style scoped>
+  .alert{
+    position: absolute;
+    padding: 6px 8px;
+    background-color: #f0f2f5;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    margin: 0 auto;
+    z-index: 999;
+    top: 100px;
+    width: fit-content;
+    left: 0;
+    right: 0;
+  }
+</style>

docs/.vuepress/components/Color.vue

@@ -0,0 +1,35 @@
+<template>
+  <div :data-clipboard-text="color" class="color" @click="onClick" :style="`background-color:${color}`" />
+</template>
+
+<script>
+  import Clipboard from 'clipboard'
+  export default {
+    name: 'Color',
+    props: ['color'],
+    data() {
+      return {
+        alert: false
+      }
+    },
+    methods: {
+      onClick() {
+        let clipboard = new Clipboard('.color')
+        clipboard.on('success', () => {
+          this.$alert(`颜色代码已复制：${this.color}`)
+          clipboard.destroy()
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .color{
+    border: 1px dashed #a0d911;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+  }
+</style>

docs/.vuepress/components/ColorList.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <color class="color" :key="index" v-for="(color, index) in colors" :color="color" ></color>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ColorList',
+    props: ['colors']
+  }
+</script>
+
+<style scoped>
+  .color{
+    margin: 0 2px;
+  }
+</style>

docs/.vuepress/config.js

@@ -50,7 +50,7 @@ module.exports = {
     nextLinks: true,
     prevLinks: true,
   },
-  plugins: ['@vuepress/back-to-top'],
+  plugins: ['@vuepress/back-to-top', require('./plugins/alert')],
   markdown: {
     lineNumbers: true
   }

docs/.vuepress/plugins/alert/Alert.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="alert" :style="`top: ${top}px`">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Alert',
+    props: ['alert'],
+    data() {
+      return {
+        top: 0
+      }
+    },
+    beforeMount() {
+      this.top = this.alert.top
+    },
+    mounted() {
+     window.addEventListener('alert_remove', (e) => {
+       this.top -= e.detail.height
+     })
+    },
+    watch: {
+      'page.alert.top': function (value) {
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .alert{
+    position: fixed;
+    padding: 6px 8px;
+    background-color: #fff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    margin: 0 auto;
+    z-index: 999;
+    top: 100px;
+    width: fit-content;
+    left: 0;
+    right: 0;
+    transition: top 0.3s;
+  }
+</style>

docs/.vuepress/plugins/alert/alertMixin.js

@@ -0,0 +1,38 @@
+import Alert from './Alert'
+
+const AlertMixin = {
+  install(Vue) {
+    Vue.mixin({
+      methods: {
+        $alert(message, duration = 2000) {
+          let Constructor= Vue.extend(Alert)
+          let alert = new Constructor()
+          alert.$slots.default = message
+          alert.$props.alert = this.$page.alert
+          alert.$mount()
+          document.body.appendChild(alert.$el)
+
+          const appendHeight = alert.$el.offsetHeight + 16
+          this.$page.alert.top += appendHeight
+
+          setTimeout(() => {
+            this.$page.alert.top -= appendHeight
+            this.triggerRemoveAlert(appendHeight)
+            setTimeout(() => {
+              alert.$destroy()
+              alert.$el.remove()
+            }, 100)
+          }, duration)
+        },
+        triggerRemoveAlert(height) {
+          const event = new CustomEvent('alert_remove', {
+            detail: {height}
+          })
+          window.dispatchEvent(event)
+        }
+      }
+    })
+  }
+}
+
+export default AlertMixin

docs/.vuepress/plugins/alert/clientRootMixin.js

@@ -0,0 +1,5 @@
+export default {
+  updated() {
+    this.$page.alert.top = 100
+  }
+}

docs/.vuepress/plugins/alert/enhanceApp.js

@@ -0,0 +1,5 @@
+import AlertMixin from './alertMixin'
+
+export default ({Vue}) => {
+  Vue.use(AlertMixin)
+}

docs/.vuepress/plugins/alert/index.js

@@ -0,0 +1,13 @@
+const path = require('path')
+
+module.exports = (options, ctx) => {
+  return {
+    clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js'),
+    extendPageData($page) {
+      $page.alert = {
+        top: 100
+      }
+    },
+    enhanceAppFiles: path.resolve(__dirname, 'enhanceApp.js')
+  }
+}