uniapp 自定义toast

Uniapp提供了uni.showToast()方法来实现简单的Toast提示，但如果需要自定义Toast，则可以通过以下步骤实现：

1. 在项目的static文件夹中创建自定义Toast的HTML文件，例如toast.html。
2. 在该HTML文件中编写自定义Toast的样式和内容。
3. 在Vue组件中引入该HTML文件，并通过uni.createSelectorQuery().select()方法获取该元素的位置信息。
4. 在需要弹出Toast的地方，通过uni.showToast()方法传入自定义的HTML字符串，并设置相关参数，如位置、持续时间等。

以下是一个简单的示例代码：

<!-- toast.html -->
<template>
  <div class="custom-toast">
    <div class="toast-content">{{content}}</div>
  </div>
</template>

<style>
.custom-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
}

.toast-content {
  text-align: center;
}
</style>

<!-- my-component.vue -->
<template>
  <view>
    <button @click="showToast">点击弹出自定义Toast</button>
  </view>
</template>

<script>
import toastHtml from '@/static/toast.html'

export default {
  methods: {
    showToast() {
      uni.createSelectorQuery().select('.custom-toast').boundingClientRect((rect) => {
        uni.showToast({
          title: toastHtml,
          icon: 'none',
          duration: 2000,
          position: 'custom',
          customClass: 'custom-toast',
          success() {
            console.log('Toast弹出成功')
          },
          fail() {
            console.log('Toast弹出失败')
          }
        })
      }).exec()
    }
  }
}
</script>

在上面的示例代码中，我们首先在static文件夹中创建了一个toast.html文件，用于定义自定义Toast的样式和内容。

然后在Vue组件中通过import引入该文件，并在showToast方法中使用uni.createSelectorQuery().select()方法获取.custom-toast元素的位置信息。

最后在uni.showToast()方法中传入自定义的HTML字符串，并设置相关参数，如位置、持续时间等。注意需要设置position为'custom'，并传入自定义的class名称。

这样就可以实现自定义Toast功能了。