模仿uniapp 封装一个自定义的showToast方法

好的，我可以帮你封装一个类似于uniapp的showToast方法，供你参考。

首先，你需要在全局中定义一个toast组件，用来展示toast的内容。可以使用Vue.extend()方法来创建一个可复用的组件：

import Vue from 'vue'
import ToastComponent from './Toast.vue'

const ToastConstructor = Vue.extend(ToastComponent)

let toastPool = [] // 存储所有的toast实例

// 创建一个toast实例
function createToastInstance () {
  if (toastPool.length > 0) {
    return toastPool.shift()
  }
  return new ToastConstructor({
    el: document.createElement('div')
  })
}

// 释放一个toast实例
function releaseToastInstance (instance) {
  if (instance) {
    toastPool.push(instance)
  }
}

// 封装showToast方法
function showToast (options = {}) {
  const instance = createToastInstance()

  // 设置toast的属性
  instance.message = options.message || ''
  instance.duration = options.duration || 2000
  instance.type = options.type || 'default'

  // 将toast组件添加到页面中
  document.body.appendChild(instance.$el)

  // 设置定时器，隐藏toast
  setTimeout(() => {
    hideToast(instance)
  }, instance.duration)
}

// 隐藏toast
function hideToast (instance) {
  if (instance) {
    instance.show = false
    instance.$el.addEventListener('transitionend', function () {
      releaseToastInstance(instance)
      instance.$el.removeEventListener('transitionend', arguments.callee)
      instance.$destroy()
    })
  }
}

export default showToast

然后，你需要创建一个Toast.vue组件，用来展示toast的内容：

<template>
  <div class="toast" :class="type" v-show="show">{{ message }}</div>
</template>

<script>
export default {
  data () {
    return {
      show: true,
      message: '',
      type: 'default'
    }
  }
}
</script>

<style>
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
  color: #fff;
  z-index: 9999;
  transition: all 0.3s;
}

.toast.default {
  background-color: #333;
}

.toast.success {
  background-color: #67c23a;
}

.toast.warning {
  background-color: #e6a23c;
}

.toast.error {
  background-color: #f56c6c;
}
</style>

最后，你可以在需要展示toast的地方调用showToast方法，来展示toast的内容：

import showToast from './showToast'

showToast({
  message: 'Hello World',
  duration: 2000,
  type: 'success'
})

以上就是一个简单的封装了showToast方法的示例代码，供你参考。