更新记录

0.0.3（2023-06-06）

优化文档

0.0.2（2023-06-06）

一个基于Vue3和TypeScript开发的 Toast 组件，在页面中间弹出提示，用于消息通知、加载提示、操作结果提示等场景。

平台兼容性

组件库官方文档：fant-mini-plus

组件库提供更多vue3组件，比单独引入更加强大

Toast 轻提示

在页面中间弹出提示，用于消息通知、加载提示、操作结果提示等场景。

代码演示

基础用法

<!-- 在页面内添加对应的节点 -->
<hd-toast></hd-toast>

<button type="primary" @click="open">开启toast</button>

<script lang="ts" setup>
import { ref } from 'vue'
import { useToast } from '@/uni_modules/hd-toast/components/hd-toast';

const toast = useToast()

function open() {
  toast.showToast({
    title: '打开了'
  })
}
</script>

底色类型

通过type设置底色类型；white底色为白色，图标为多色；black底色为黑色，图标为白色；默认为black。

<button type="primary" @click="open">开启toast</button>
<hd-toast></hd-toast>

<script lang="ts" setup>
import { ref } from 'vue'
import { useToast } from '@/uni_modules/hd-toast/components/hd-toast';

const toast = useToast()

function open() {
  toast.showToast({
    title: '打开了',
    type: 'white'
  })
}
</script>

提示内容

通过title设置提示内容。

<button type="primary" @click="open">开启toast</button>
<hd-toast ></hd-toast>

<script lang="ts" setup>
import { ref } from 'vue'
import { useToast } from '@/uni_modules/hd-toast/components/hd-toast';

const toast = useToast()

function open() {
  toast.showToast({
    title: '这里是提示内容' 
  })
}
</script>

提示图标

通过icon设置提示图标；success: 显示成功图标；warning: 显示警告图标；error: 显示错误图标；none: 不显示图标。

<button type="primary" @click="open">开启toast</button>
<hd-toast ></hd-toast>

<script lang="ts" setup>
import { ref } from 'vue'
import { useToast } from '@/uni_modules/hd-toast/components/hd-toast';

const toast = useToast()

function open() {
  toast.showToast({
    title: '这里是提示内容',
    icon: 'error' 
  })
}
</script>

自定义图标

通过image设置自定义图标，优先级大于icon。

<button type="primary" @click="open">开启toast</button>
<hd-toast ></hd-toast>

<script lang="ts" setup>
import { ref } from 'vue'
import { useToast } from '@/uni_modules/hd-toast/components/hd-toast';

const toast = useToast()

function open() {
  toast.showToast({
    title: '这里是提示内容', icon: 'error', image: '' 
  })
}
</script>

提示持续时间

通过duration设置调整显示toast时间，单位毫秒，默认 1500 毫秒。

<button type="primary" @click="open">开启toast</button>
<hd-toast ></hd-toast>

<script lang="ts" setup>
import { ref } from 'vue'
import { useToast } from '@/uni_modules/hd-toast/components/hd-toast';

const toast = useToast()

function open() {
  toast.showToast({
    title: '这里是提示内容', icon: 'error', duration: 2000 
  })
}
</script>

方法

fant-mini 中导出了以下 Toast 相关的辅助函数：

ToastOptions 数据结构

调用 showToast 方法时，支持传入以下选项：

Props

Events

联系方式

有不明白或者建议可以扫码交流

联系我们