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>

自定义图标 1.30.3+ ​

可以使用 icon 插槽或者 icon 和 icon-family 属性自定义图标。

vue
<template>
  <sar-toast-agent id="customToastIcon">
    <template #icon>
      <sar-icon name="/static/logo.svg" size="64rpx" />
    </template>
  </sar-toast-agent>
  <sar-list card>
    <sar-list-item hover arrow title="自定义图标" @click="onIconToast" />
    <sar-list-item hover arrow title="使用图标属性" @click="onIconPropToast" />
  </sar-list>
</template>

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

const onIconToast = () => {
  toast.success({
    id: 'customToastIcon',
    title: '自定义图标',
  })
}

const onIconPropToast = () => {
  toast.success('使用 icon 属性', {
    icon: 'star-fill',
    iconFamily: 'sari',
  })
}
</script>
vue
<template>
  <sar-toast-agent id="customToastIcon">
    <template #icon>
      <sar-icon name="/static/logo.svg" size="64rpx" />
    </template>
  </sar-toast-agent>
  <sar-list card>
    <sar-list-item hover arrow title="自定义图标" @click="onIconToast" />
    <sar-list-item hover arrow title="使用图标属性" @click="onIconPropToast" />
  </sar-list>
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
const onIconToast = () => {
  toast.success({
    id: "customToastIcon",
    title: "\u81EA\u5B9A\u4E49\u56FE\u6807"
  });
};
const onIconPropToast = () => {
  toast.success("\u4F7F\u7528 icon \u5C5E\u6027", {
    icon: "star-fill",
    iconFamily: "sari"
  });
};
</script>

插槽 1.30.3+ ​

可以使用 toast 组件的插槽自定义内容，如果喜欢命令式来使用 toast 组件，可以使用 toast-agent 组件 + toast 函数，只要给 toast-agent 组件设置对应的 id，在调用 toast 函数时传入相同的 id，就可以使用对应的 toast-agent 组件的插槽内容了。

vue
<template>
  <sar-list card>
    <sar-list-item hover arrow title="自定义内容" @click="onCustomToast" />
    <sar-list-item hover arrow title="自定义图标" @click="onIconToast" />
  </sar-list>

  <sar-toast-agent id="custom-content">
    <view class="custom-content">
      <text style="text-decoration: line-through">完全自定义的内容</text>
      <text style="font-style: italic">可以包含多个元素</text>
    </view>
  </sar-toast-agent>

  <sar-toast-agent id="custom-icon" title="自定义图标提示">
    <template #icon>
      <sar-icon name="star-fill" family="sari" />
    </template>
  </sar-toast-agent>
</template>

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

const onCustomToast = () => {
  toast({
    id: 'custom-content',
  })
}

const onIconToast = () => {
  toast({
    id: 'custom-icon',
  })
}
</script>

<style scoped>
.custom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  padding: 40rpx 60rpx;
  color: var(--sar-white);
}
</style>
vue
<template>
  <sar-list card>
    <sar-list-item hover arrow title="自定义内容" @click="onCustomToast" />
    <sar-list-item hover arrow title="自定义图标" @click="onIconToast" />
  </sar-list>

  <sar-toast-agent id="custom-content">
    <view class="custom-content">
      <text style="text-decoration: line-through">完全自定义的内容</text>
      <text style="font-style: italic">可以包含多个元素</text>
    </view>
  </sar-toast-agent>

  <sar-toast-agent id="custom-icon" title="自定义图标提示">
    <template #icon>
      <sar-icon name="star-fill" family="sari" />
    </template>
  </sar-toast-agent>
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
const onCustomToast = () => {
  toast({
    id: "custom-content"
  });
};
const onIconToast = () => {
  toast({
    id: "custom-icon"
  });
};
</script>

<style scoped>
.custom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  padding: 40rpx 60rpx;
  color: var(--sar-white);
}
</style>

API ​

ToastProps ​

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

ToastSlots 1.30.3+ ​

插槽描述属性
default自定义默认内容-
icon自定义图标-

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

ToastAgentSlots 1.30.3+ ​

继承 ToastSlots。

ToastAgentEmits 1.20.2+ ​

继承 ToastEmits。

命令式方法 ​

名称描述类型
toast显示提示ToastFunction
toast.success显示成功类型提示ToastSimpleShowFunction
toast.fail显示失败类型提示ToastSimpleShowFunction
toast.loading显示加载类型提示ToastSimpleShowFunction
toast.hide隐藏指定 id 的命令式提示(id = 'toast') => void
toast.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