Sard

Appearance

100%
在新窗口打开⤴

Toast轻提示

介绍 ​

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

代码演示 ​

基础使用 ​

使用 toast 等方法显示提示。

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

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

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

<script setup lang="js">
import { toast } from 'sard'
const onToast = () => {
  toast('文本提示')
}
const onLongToast = () => {
  toast('春山暖日和风，阑干楼阁帘栊，杨柳秋千院中。啼莺舞燕，小桥流水飞红。')
}
const onSuccessToast = () => {
  toast.success('成功')
}
const onFailToast = () => {
  toast.fail('失败')
}
const onLoadingToast = () => {
  toast.loading('加载中')
}
const onHideToast = () => {
  toast.hide()
}
</script>

自定义位置 ​

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

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

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

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

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

<script setup lang="js">
import { toast } from 'sard'
const onTopToast = () => {
  toast('顶部位置', { position: 'top' })
}
const onBottomToast = () => {
  toast('底部位置', { position: 'bottom' })
}
</script>

加载中的背景 ​

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

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

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

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>
  <s-list card>
    <s-list-item hover arrow title="显示背景" @click="showOverlayToast" />
    <s-list-item hover arrow title="透明背景" @click="showTransparentOverlayToast" />
  </s-list>
</template>

<script setup lang="js">
import { toast } from 'sard'
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>
  <s-toast v-model:visible="visible" title="自定义图标" #icon>
    <img :src="icon" class="size-8" />
  </s-toast>

  <s-list card>
    <s-list-item hover arrow title="自定义图标" @click="onIconToast" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import icon from '@/assets/logo.svg'

const visible = ref(false)

const onIconToast = () => {
  visible.value = true
}
</script>
vue
<template>
  <s-toast v-model:visible="visible" title="自定义图标" #icon>
    <img :src="icon" class="size-8" />
  </s-toast>

  <s-list card>
    <s-list-item hover arrow title="自定义图标" @click="onIconToast" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import icon from '@/assets/logo.svg'
const visible = ref(false)
const onIconToast = () => {
  visible.value = true
}
</script>

创建独立的提示 ​

默认的 toast 是全局唯一的提示实例。当需要同时展示多个提示，或希望为提示预设默认属性时，可以通过 createToast 创建彼此独立的提示实例，实例之间互不影响。

vue
<template>
  <s-list card>
    <s-list-item hover arrow title="同时显示多个提示" @click="onMultiple" />
    <s-list-item hover arrow title="独立控制显隐" @click="onIndependent" />
  </s-list>
</template>

<script setup lang="ts">
import { createToast, toast } from 'sard'

// createToast 用于创建独立的命令式提示实例，
// 可通过 defaultOptions 为实例设置默认属性，不同实例之间互不影响。
const topToast = createToast({ position: 'top' })
const bottomToast = createToast({ position: 'bottom' })
const loadingToast = createToast()

const onMultiple = () => {
  // 全局 toast 与独立创建的实例可以同时展示
  toast('全局提示')
  topToast('顶部提示')
  bottomToast('底部提示')
}

const onIndependent = () => {
  // loading 类型的提示不会自动隐藏，需调用对应实例的 hide 方法
  loadingToast.loading('加载中')

  setTimeout(() => {
    loadingToast.hide()
  }, 2000)
}
</script>
vue
<template>
  <s-list card>
    <s-list-item hover arrow title="同时显示多个提示" @click="onMultiple" />
    <s-list-item hover arrow title="独立控制显隐" @click="onIndependent" />
  </s-list>
</template>

<script setup lang="js">
import { createToast, toast } from 'sard'
// createToast 用于创建独立的命令式提示实例，
// 可通过 defaultOptions 为实例设置默认属性，不同实例之间互不影响。
const topToast = createToast({ position: 'top' })
const bottomToast = createToast({ position: 'bottom' })
const loadingToast = createToast()
const onMultiple = () => {
  // 全局 toast 与独立创建的实例可以同时展示
  toast('全局提示')
  topToast('顶部提示')
  bottomToast('底部提示')
}
const onIndependent = () => {
  // loading 类型的提示不会自动隐藏，需调用对应实例的 hide 方法
  loadingToast.loading('加载中')
  setTimeout(() => {
    loadingToast.hide()
  }, 2e3)
}
</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

ToastSlots ​

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

ToastEmits ​

继承 MotionEmits。

事件描述类型
update:visible提示框显隐时触发(visible: boolean) => void

命令式方法 ​

名称描述类型
toast显示提示ToastFunction
toast.success显示成功类型提示ToastSimpleShowFunction
toast.fail显示失败类型提示ToastSimpleShowFunction
toast.loading显示加载类型提示ToastSimpleShowFunction
toast.hide隐藏命令式提示() => void

ToastFunction ​

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

ToastSimpleShowFunction ​

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

createToast ​

默认导出的 toast 就是 createToast() 创建的一个全局提示实例。当需要同时展示多个提示，或为提示实例预设默认属性时，可以通过 createToast 创建独立的实例，不同实例之间相互独立、互不影响。

ts
function createToast(defaultOptions?: ToastOptions): ToastFunction
参数描述类型
defaultOptions该实例的默认属性，展示时传入的属性会覆盖默认属性ToastOptions

示例 ​

ts
import { createToast } from 'sard'

// 创建一个固定在顶部显示的独立提示实例
const topToast = createToast({
  position: 'top',
})

topToast('顶部提示')
topToast.hide()

主题定制 ​

样式变量 ​

CSS 变量值
--s-toast-top10%
--s-toast-bottom10%
--s-toast-font-sizevar(--s-font-size)
--s-toast-width120px
--s-toast-min-height-icon-onlyvar(--s-toast-width)
--s-toast-padding-xvar(--s-size)
--s-toast-padding-yvar(--s-size)
--s-toast-border-radiusvar(--s-border-radius-lg)
--s-toast-colorvar(--s-white)
--s-toast-bgvar(--s-overlay-illegible)
--s-toast-text-max-width80%
--s-toast-text-padding-y10px
--s-toast-icon-margin-bottomvar(--s-size-xs)
--s-toast-icon-size36px
--s-toast-icon-loading-size30px
--s-toast-title-font-sizevar(--s-toast-font-size)

Released under the MIT License.

Copyright © 2023-present wuzhitao