Vue 2.X 拓展图片预览插件

Preview.js

import ToastComponent from './Toast.vue'
const Toast = {}
Toast.install = Vue => {
  const ToastConstructor = Vue.extend(ToastComponent)
  const instance = new ToastConstructor()
  Vue.prototype.$Toast = function (options) {
    if (!options) {
      return console.error('Please Pass In The Data / 请传入内容')
    }
    if (options.constructor !== Object) {
      return console.error('Please Pass In The Object Format / 请传入对象格式')
    }
    options.msg = options.msg || '默认消息'
    options.duration = options.duration || 3000
    if (document.getElementsByClassName('toast').length === 0) {
      instance.$mount(document.createElement('div'))
      document.body.appendChild(instance.$el)
      instance.msg = options.msg
      instance.visible = true
      setTimeout(() => {
        instance.visible = false
        document.body.removeChild(instance.$el)
      }, options.duration)
    }
  }
}
export default Toast

Preview.vue

<template>
  <transition name="bounce">
    <div class="toast" v-show="visible">
      <span>{{ msg }}</span>
    </div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      msg: '',
      visible: false
    }
  }
}
</script>
<style lang="css" scoped>
.bounce-enter-active {
  animation: bounce-in 0.5s linear;
}
.bounce-leave-active {
  animation: bounce-in 0.5s linear reverse;
}
@keyframes bounce-in {
  0% {
    transform: translate3d(-50%, 0, 0) scale(0);
  }

  25% {
    transform: translate3d(-50%, 0, 0) scale(0.55);
  }

  50% {
    transform: translate3d(-50%, 0, 0) scale(1);
  }

  75% {
    transform: translate3d(-50%, 0, 0) scale(0.85);
  }

  100% {
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}
.toast {
  position: fixed;
  z-index: 5201314;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  background: rgba(0, 0, 0, 0.75);
  padding: 0 32px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  user-select: none;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  letter-spacing: 1px;
}
</style>