自定义 toast （vue.extend）

自定义Toast

toast.vue

<template>
  <div class="toast" v-if="showWrap">
    <div class="toast_icon">
      <img v-if="iconState === 'S'" src="../assets/images/success.png" alt="">
      <img v-if="iconState === 'F'" src="../assets/images/fail.png" alt="">
    </div>
    <div class="toast_text">{{text}}</div>
  </div>
</template>

<script>
export default {
  name: 'toast',
  props: {
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  min-width: 360px;
  padding: 30px 40px;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background: rgba($color: #000000, $alpha: 0.8);
  z-index: 3001;
  overflow: hidden;
  .toast_icon {
    width: 40px;
    height: 40px;
    margin: 0px auto 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .toast_text {
    text-align: center;
    color: #fff;
    font-size: 18px;
    line-height: (30/18);
    white-space: nowrap;
  }
}

</style>

toast.js

import vue from 'vue';
import toastComponent from '../components/toast.vue'
const ToastConstructor = vue.extend(toastComponent)
var Test = true
// 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间
let toast = {
  show: (text, iconState, duration = 1500) => {
    if (Test === false) {
      return
    }
    const toastDom = new ToastConstructor({
      el: document.createElement('div'),
      data () {
        return {
          text: text,
          showWrap: true, // 是否显示组件
          showContent: true, // 作用:在隐藏组件之前,显示隐藏动画
          iconState: iconState
        }
      }
    })
    document.body.appendChild(toastDom.$el)
    Test = false
    // 过了 duration 时间后隐藏整个组件
    setTimeout(() => {
      toastDom.showWrap = false
      Test = true
    }, duration)
  },

  success: (text) => {
    text = text? text : '操作成功'
    toast.show(text, 'S')
  },

  fail: (text) => {
    text = text? text : '操作失败'
    toast.show(text, 'F')
  }
}

vue.prototype.$toast = vue.$toast = toast

export default toast

使用

this.$toast.success()
this.$toast.fail('操作失败')