NaEasy UI

Appearance

Toast 轻提示 ​

介绍 ​

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

导入 ​

js
import Toast from '@/components/feedback/Toast.vue';

使用方法 ​

基础用法 ​

Toast 组件需要使用 ref 引用，并通过调用 show 方法或其他快捷方法来显示提示信息。

vue
<template>
  <Toast ref="toast1" />
  <Button @click="showToast">显示提示</Button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Toast, { type ToastInstance } from '@/components/feedback/Toast.vue';
import Button from '@/components/basic/Button.vue';

const toast1 = ref<ToastInstance>();

function showToast() {
  toast1.value?.info('这是一个提示！');
}
</script>

不同类型的提示 ​

Toast 支持多种类型的提示，包括文字提示、成功提示、失败提示、无网络提示等。

vue
<template>
  <Toast ref="toast1" />
  <FlexRow wrap :padding="10" :gap="10">
    <Button @click="toast1?.info('这是一个提示！')">文字提示</Button>
    <Button @click="toast1?.success('这是一个成功提示！')">成功提示</Button>
    <Button @click="toast1?.fail('这是一个失败提示！')">失败提示</Button>
    <Button @click="toast1?.offline('网络不给力，请稍后再试')">无网络提示</Button>
  </FlexRow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Toast, { type ToastInstance } from '@/components/feedback/Toast.vue';
import Button from '@/components/basic/Button.vue';
import FlexRow from '@/components/layout/FlexRow.vue';

const toast1 = ref<ToastInstance>();
</script>

自定义位置 ​

Toast 默认渲染在屏幕正中位置，通过 position 属性可以控制 Toast 展示的位置。

vue
<template>
  <Toast ref="toast1" position="center" />
  <Toast ref="toast2" position="top" />
  <Toast ref="toast3" position="bottom" />
  <FlexRow wrap :padding="10" :gap="10">
    <Button @click="toast1?.info('在中间显示')">中间显示</Button>
    <Button @click="toast2?.info('在顶部显示')">顶部显示</Button>
    <Button @click="toast3?.info('在底部显示')">底部显示</Button>
  </FlexRow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Toast, { type ToastInstance } from '@/components/feedback/Toast.vue';
import Button from '@/components/basic/Button.vue';
import FlexRow from '@/components/layout/FlexRow.vue';

const toast1 = ref<ToastInstance>();
const toast2 = ref<ToastInstance>();
const toast3 = ref<ToastInstance>();
</script>

动态修改提示 ​

可以通过 updateProps 方法动态修改 Toast 的内容。

vue
<template>
  <Toast ref="toast1" />
  <Button @click="showAndUpdate">显示并更新提示</Button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Toast, { type ToastInstance } from '@/components/feedback/Toast.vue';
import Button from '@/components/basic/Button.vue';

const toast1 = ref<ToastInstance>();

function showAndUpdate() {
  toast1.value?.loading({ content: '加载中请稍后', duration: -1 });
  let time = 0;
  const timer = setInterval(() => {
    if (time < 8) {
      time++;
      toast1.value?.updateProps({ content: `加载中 （${time}/8）...` });
    } else {
      toast1.value?.close();
      clearInterval(timer);
    }
  }, 1000);
}
</script>

API 参考 ​

Toast ​

轻提示组件。

Props ​

名称说明类型必填默认值
position提示显示位置'top' | 'bottom' | 'center'-'center'
forbidClick是否禁止背景点击boolean-false
closeOnClick是否在点击后关闭boolean-true
maskStyle土司背景的自定义样式ViewStyle--
toastStyle土司提示容器的自定义样式ViewStyle--
textStyle土司提示文字的自定义样式TextStyle--
iconProps图标自定义属性IconProps--

Slots ​

名称说明
content提示内容区域，可以自定义提示的内容

Events ​

名称说明参数
click点击提示区域时触发$event

方法 ​

show(options: ToastShowProps): void ​

显示提示信息。

参数

名称说明类型必填默认值
options提示信息选项ToastShowProps是-

info(options?: ToastShowProps|string): void ​

显示信息提示。

参数

名称说明类型必填默认值
options提示信息选项或内容字符串ToastShowProps|string否-

success(options?: ToastShowProps|string): void ​

显示成功提示。

参数

名称说明类型必填默认值
options提示信息选项或内容字符串ToastShowProps|string否-

fail(options?: ToastShowProps|string): void ​

显示失败提示。

参数

名称说明类型必填默认值
options提示信息选项或内容字符串ToastShowProps|string否-

offline(options?: ToastShowProps|string): void ​

显示网络错误提示。

参数

名称说明类型必填默认值
options提示信息选项或内容字符串ToastShowProps|string否-

loading(options?: ToastShowProps|string): void ​

显示加载中提示。

参数

名称说明类型必填默认值
options提示信息选项或内容字符串ToastShowProps|string否-

text(options?: ToastShowProps|string): void ​

显示纯文本提示。

参数

名称说明类型必填默认值
options提示信息选项或内容字符串ToastShowProps|string否-

hide(): void ​

隐藏提示信息。

close(): void ​

关闭提示信息（与hide功能相同）。

updateProps(options?: ToastShowProps): void ​

动态更新提示信息的属性。

参数

名称说明类型必填默认值
options需要更新的提示信息选项ToastShowProps否-

ToastShowProps ​

提示信息的选项接口。

名称说明类型默认值可选值
duration自动关闭的延时，单位ms。0：根据内容长度自动设置关闭时间，最小3000ms，最大15000ms；-1：一直显示，直到手动关闭number00, -1, 其他正数
type图标类型stringtexttext, loading, success, fail, info, offline
icon自定义图标string--
content提示内容string--
onClose关闭后回调函数() => void--

主题变量 ​

名称类型默认值说明
ToastBackgroundColorstringbackground.toast-
ToastTextColorstringwhite-
ToastIconSizenumber85-
ToastIconMarginBottomnumber12-
ToastMarginWhenTopnumber200-
ToastMarginWhenBottomnumber200-
ToastIconSuccessstringsuccess-
ToastIconErrorstringerror-
ToastIconOfflinestringcry-
ToastIconInfostringprompt-
ToastPaddingVerticalnumber25-
ToastPaddingHorizontalnumber30-
ToastRadiusnumber16-