chore: add alert plugin for docs; :star2:

chenghongxing

2020-07-22 107d64fb06957380a9adabc7bd343793aca3c92a

chore: add alert plugin for docs; :star2:

 docs/.vuepress/components/Alert.vue

New file
@@ -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

New file
@@ -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

New file
@@ -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 @@
    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

New file
@@ -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

New file
@@ -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

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

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

New file
@@ -0,0 +1,5 @@
import AlertMixin from './alertMixin'

export default ({Vue}) => {
  Vue.use(AlertMixin)
}

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

New file
@@ -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')
  }
}