uniapp 封装一个showToast方法

可以使用uni-app提供的uni.showToast()方法来封装一个showToast方法，示例代码如下：

function showToast(title, icon = 'none', duration = 2000) {
  uni.showToast({
    title: title,
    icon: icon,
    duration: duration
  });
}

使用方法：

showToast('Toast内容');
showToast('Toast成功', 'success');
showToast('Toast失败', 'error');

其中，title参数表示Toast的内容，icon参数表示Toast的图标，取值可以为：'success'、'loading'、'none'、'error'，duration参数表示Toast的显示时间，单位为毫秒，默认为2000毫秒。

相关问题

uniapp封装uni.showToast提示消息框

你可以使用uni.showToast来封装提示消息框，以下是一个示例代码：

// 在你的代码中调用该方法来显示提示消息框
function showMsg(message) {
  uni.showToast({
    title: message,
    icon: 'none',
    duration: 2000
  });
}

在上述代码中，showMsg函数接受一个message参数，用于指定要显示的消息内容。uni.showToast函数用于显示消息框，其中title参数用于指定消息内容，icon参数用于指定图标（'none'表示无图标），duration参数用于指定消息框停留的时间（单位为毫秒）。

你可以根据需要自行修改函数名和参数设置，以适应你的项目需求。

模仿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方法的示例代码，供你参考。