更新记录
1.0.4(2024-08-06)
下载此版本
修改文档
1.0.3(2024-07-30)
下载此版本
适配r-config-provider
1.0.2(2024-07-23)
下载此版本
修复控制台警告
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
r-toast
r-toast
轻提示,在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。
示例
<template>
<r-button @click="openToast(0)">打开</r-button>
<r-button @click="openToast(1)">打开失败</r-button>
<r-button @click="openToast(2)">打开成功</r-button>
<r-button @click="openToast(3)">打开加载</r-button>
<r-toast ref="toastRef"></r-toast>
</template>
<script setup>
import { ref } from "vue";
import useToast from "@/uni_modules/r-toast/components/r-toast/useToast";
const toastRef = ref(null);
const {
showToast,
showLoadingToast,
showSuccessToast,
showFailToast,
closeToast,
} = useToast(toastRef);
const openToast = (type) => {
if (type == 1) {
showFailToast("失败了");
} else if (type == 2) {
showSuccessToast("成功了");
} else if (type == 3) {
showLoadingToast("加载中");
} else {
showToast("打开了弹窗");
}
};
</script>
API
Props
名称 |
说明 |
类型 |
默认值 |
可选值 |
type |
提示类型 |
String |
text |
success fail loading text |
position |
位置 |
String |
middle |
top bottom middle |
message |
文本内容 |
String |
- |
- |
wordBreak |
文本内容的换行方式 |
String |
break-all |
break-all normal break-word |
icon |
自定义图标,等同于 r-icon 组件的 name 属性 |
String |
- |
- |
iconPrefix |
图标类名前缀,等同于 r-icon 组件的 prefix 属性 |
String |
van-icon |
iconfont |
duration |
展示时长(ms) |
Number |
3000 |
- |
overlay |
是否显示背景遮罩层 |
Boolean |
false |
true |
closeOnClick |
是否在点击后关闭 |
Boolean |
false |
true |
closeOnClickOverlay |
是否在点击遮罩层后关闭 |
Boolean |
false |
true |
loadingType |
加载图标类型 |
String |
circular |
circular spinner |
customClass |
自定义类名 |
String |
- |
- |
customStyle |
自定义样式 |
Object |
{} |
- |
overlayClass |
自定义遮罩层类名 |
String |
- |
|
overlayStyle |
自定义遮罩层样式 |
Object |
{} |
|
entryClass |
入场动画 |
String |
animate__fadeIn |
更多可查看 animate |
exitClass |
退场动画 |
String |
animate__fadeOut |
更多可查看 animate |
themeName |
r-theme 的主题名称 |
String |
default |
|
Slots
Events
名称 |
说明 |
回调参数 |
close |
关闭时触发 |
- |
opened |
打开时触发 |
- |
Methods
名称 |
说明 |
参数 |
setData |
设置toast内部数据 |
(data: Object|String) data对象同props |
changeShow |
改变显隐状态 |
(flag:Boolean) |
Hooks
名称 |
说明 |
参数 |
showToast |
展示提示 |
value:String|Object //对象同props |
showLoadingToast |
展示加载提示 |
value:String|Object |
showSuccessToast |
展示成功提示 |
value:String|Object |
showFailToast |
展示失败提示 |
value:String |Object |
closeToast |
关闭提示 |
- |
更多组件,请前往rainui