介绍
在页面中间弹出黑色半透明提示,表示提示、结果、加载中状态。
引入
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 | 是否显示背景遮罩 | boolean | false |
| transparent | 使背景透明 | boolean | false |
| timeout | 提示的延迟时间,单位 ms | number | 1500 |
| duration | 显隐动画时长,单位 ms | number | 300 |
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 | 提示组件的 id | string | '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);
}