Sard Uniapp

Appearance

在新窗口打开⤴

Toast轻提示

介绍 ​

在页面中间弹出黑色半透明提示，表示提示、结果、加载中状态。

引入 ​

js
import Toast from 'sard-uniapp/components/toast/toast.vue'
import ToastAgent from 'sard-uniapp/components/toast-agent/toast-agent.vue'
import { toast } from 'sard-uniapp'

代码演示 ​

基础使用 ​

先在页面放置代理组件。

tsx
<sar-toast-agent />

接着便可以使用 toast 等方法显示提示。

vue
<template>
  <sar-list card>
    <sar-list-item hover arrow title="文本提示" @click="onToast" />
    <sar-list-item hover arrow title="很长的文本" @click="onLongToast" />
    <sar-list-item hover arrow title="成功提示" @click="onSuccessToast" />
    <sar-list-item hover arrow title="失败提示" @click="onFailToast" />
    <sar-list-item hover arrow title="加载中提示" @click="onLoadingToast" />
    <sar-list-item hover arrow title="隐藏提示" @click="onHideToast" />
  </sar-list>
</template>

<script setup lang="ts">
import { toast } from 'sard-uniapp'

const onToast = () => {
  toast('文本提示')
}

const onLongToast = () => {
  toast('春山暖日和风，阑干楼阁帘栊，杨柳秋千院中。啼莺舞燕，小桥流水飞红。')
}

const onSuccessToast = () => {
  toast.success('成功')
}

const onFailToast = () => {
  toast.fail('失败')
}

const onLoadingToast = () => {
  toast.loading('加载中')
}

const onHideToast = () => {
  toast.hide()
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item hover arrow title="文本提示" @click="onToast" />
    <sar-list-item hover arrow title="很长的文本" @click="onLongToast" />
    <sar-list-item hover arrow title="成功提示" @click="onSuccessToast" />
    <sar-list-item hover arrow title="失败提示" @click="onFailToast" />
    <sar-list-item hover arrow title="加载中提示" @click="onLoadingToast" />
    <sar-list-item hover arrow title="隐藏提示" @click="onHideToast" />
  </sar-list>
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
const onToast = () => {
  toast("\u6587\u672C\u63D0\u793A");
};
const onLongToast = () => {
  toast("\u6625\u5C71\u6696\u65E5\u548C\u98CE\uFF0C\u9611\u5E72\u697C\u9601\u5E18\u680A\uFF0C\u6768\u67F3\u79CB\u5343\u9662\u4E2D\u3002\u557C\u83BA\u821E\u71D5\uFF0C\u5C0F\u6865\u6D41\u6C34\u98DE\u7EA2\u3002");
};
const onSuccessToast = () => {
  toast.success("\u6210\u529F");
};
const onFailToast = () => {
  toast.fail("\u5931\u8D25");
};
const onLoadingToast = () => {
  toast.loading("\u52A0\u8F7D\u4E2D");
};
const onHideToast = () => {
  toast.hide();
};
</script>

自定义位置 ​

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

vue
<template>
  <sar-list card>
    <sar-list-item hover arrow title="顶部位置" @click="onTopToast" />
    <sar-list-item hover arrow title="底部位置" @click="onBottomToast" />
  </sar-list>
</template>

<script setup lang="ts">
import { toast } from 'sard-uniapp'

const onTopToast = () => {
  toast('顶部位置', {
    position: 'top',
  })
}

const onBottomToast = () => {
  toast('底部位置', {
    position: 'bottom',
  })
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item hover arrow title="顶部位置" @click="onTopToast" />
    <sar-list-item hover arrow title="底部位置" @click="onBottomToast" />
  </sar-list>
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
const onTopToast = () => {
  toast("\u9876\u90E8\u4F4D\u7F6E", {
    position: "top"
  });
};
const onBottomToast = () => {
  toast("\u5E95\u90E8\u4F4D\u7F6E", {
    position: "bottom"
  });
};
</script>

加载中的背景 ​

默认显示加载类型的提示不会显示遮罩背景，设置 overlay: true 会显示黑色遮罩， 设置 transparent: true 会让背景变透明。

vue
<template>
  <sar-list card>
    <sar-list-item hover arrow title="显示背景" @click="showOverlayToast" />
    <sar-list-item
      hover
      arrow
      title="透明背景"
      @click="showTransparentOverlayToast"
    />
  </sar-list>
</template>

<script setup lang="ts">
import { toast } from 'sard-uniapp'

const showOverlayToast = () => {
  toast.loading('加载中', {
    overlay: true,
  })

  setTimeout(() => {
    toast.hide()
  }, 1500)
}

const showTransparentOverlayToast = () => {
  toast.loading('加载中', {
    overlay: true,
    transparent: true,
  })

  setTimeout(() => {
    toast.hide()
  }, 1500)
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item hover arrow title="显示背景" @click="showOverlayToast" />
    <sar-list-item
      hover
      arrow
      title="透明背景"
      @click="showTransparentOverlayToast"
    />
  </sar-list>
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
const showOverlayToast = () => {
  toast.loading("\u52A0\u8F7D\u4E2D", {
    overlay: true
  });
  setTimeout(() => {
    toast.hide();
  }, 1500);
};
const showTransparentOverlayToast = () => {
  toast.loading("\u52A0\u8F7D\u4E2D", {
    overlay: true,
    transparent: true
  });
  setTimeout(() => {
    toast.hide();
  }, 1500);
};
</script>

API ​

ToastProps ​

属性描述类型默认值
type提示框类型'text' | 'loading' | 'success' | 'fail''text'
title标题string | number-
visible是否可见boolean-
position提示框垂直方向放置的位置'top' | 'center' | 'bottom''center'
overlay是否显示背景遮罩booleanfalse
transparent使背景透明booleanfalse
timeout提示的延迟时间，单位 msnumber1500
duration显隐动画时长，单位 msnumber300

ToastEmits ​

事件描述类型
update:visible提示框显隐时触发(visible: boolean) => void
visible-hook 1.20.2+入场/退场动画状态改变时触发(name: TransitionHookName) => void
before-enter 1.20.2+入场动画开始前触发() => void
enter 1.20.2+入场动画开始时触发() => void
after-enter 1.20.2+入场动画结束时触发() => void
enter-cancelled 1.20.2+入场动画取消时触发() => void
before-leave 1.20.2+退场动画开始前触发() => void
leave 1.20.2+退场动画开始时触发() => void
after-leave 1.20.2+退场动画结束时触发() => void
leave-cancelled 1.20.2+退场动画取消时触发() => void

ToastAgentProps / ToastOptions ​

继承 ToastProps 并有以下额外属性。

属性描述类型默认值
id提示组件的 idstring'toast'
onVisibleHook 1.20.2+入场/退场动画状态改变时调用(name: TransitionHookName) => void
onBeforeEnter 1.20.2+入场动画开始前调用() => void
onEnter 1.20.2+入场动画开始时调用() => void
onAfterEnter 1.20.2+入场动画结束时调用() => void
onEnterCancelled 1.20.2+入场动画取消时调用() => void
onBeforeLeave 1.20.2+退场动画开始前调用() => void
onLeave 1.20.2+退场动画开始时调用() => void
onAfterLeave 1.20.2+退场动画结束时调用() => void
onLeaveCancelled 1.20.2+退场动画取消时调用() => void

ToastAgentEmits 1.20.2+ ​

继承 ToastEmits。

命令式方法 ​

名称描述类型
toast显示提示ToastFunction
success显示成功类型提示ToastSimpleShowFunction
fail显示失败类型提示ToastSimpleShowFunction
loading显示加载类型提示ToastSimpleShowFunction
hide隐藏指定 id 的命令式提示(id = 'toast') => void
hideAll隐藏所有命令式提示() => void

ToastFunction ​

ts
type ToastFunction = ToastSimpleShowFunction & {
  success: ToastSimpleShowFunction
  fail: ToastSimpleShowFunction
  loading: ToastSimpleShowFunction
  hide: (id?: string) => void
  hideAll: () => void
}

ToastSimpleShowFunction ​

ts
interface ToastSimpleShowFunction {
  (options: ToastOptions): void
  (title?: string | number, options?: ToastOptions): void
}

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-toast-top: 10%;
  --sar-toast-bottom: 10%;

  --sar-toast-font-size: var(--sar-text-base);
  --sar-toast-width: calc(var(--sar-toast-font-size) * 9);
  --sar-toast-not-text-min-height: var(--sar-toast-width);
  --sar-toast-padding-x: var(--sar-toast-font-size);
  --sar-toast-padding-y: var(--sar-toast-font-size);
  --sar-toast-border-radius: var(--sar-rounded-lg);
  --sar-toast-color: var(--sar-white);
  --sar-toast-bg: var(--sar-mask-illegible);

  --sar-toast-text-max-width: 80%;
  --sar-toast-text-padding-y: 20rpx;

  --sar-toast-icon-margin-bottom: 16rpx;
  --sar-toast-icon-size: 72rpx;
  --sar-toast-icon-loading-size: 60rpx;

  --sar-toast-title-font-size: var(--sar-toast-font-size);
  --sar-toast-title-line-height: var(--sar-leading-normal);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao