示例源码如下，请查看 pre > code 标签中的内容
<template>
<!-- #ifdef APP -->
<scroll-view direction="vertical" style="flex:1">
<!-- #endif -->
<page-head :title="data.title"></page-head>
<view class="uni-padding-wrap">
<enum-data :items="iconOptions" title="设置icon" item-class="radio-icon"
@change="radioChangeIcon"></enum-data>
<boolean-data :defaultValue="data.imageSelect" title="是否显示自定义图标"
@change="change_image_boolean"></boolean-data>
<boolean-data :defaultValue="data.maskSelect" title="是否显示透明蒙层-屏蔽点击事件"
@change="change_mask_boolean"></boolean-data>
<view class="uni-title uni-list-cell-padding">提示的延迟时间，默认：1500（单位毫秒）</view>
<view class="uni-list-cell-padding">
<slider @change="sliderChange" foreColor="#007AFF" :value="data.intervalSelect" :min="1500" :max="5000"
:show-value="true" />
</view>
<view class="uni-btn-v">
<button type="default" @tap="toast1Tap" id="btn-toast-default">点击弹出toast</button>
<button type="default" @tap="hideToast" id="btn-toast-hide">点击隐藏toast</button>
</view>
<!-- #ifdef APP -->
<enum-data :items="positionOptions" title="设置position，仅App生效" item-class="radio-position"
@change="radioChangePosition"></enum-data>
<button class="uni-btn uni-common-mb" type="default" @tap="toast2Tap">点击弹出设置position的toast</button>
<!-- #endif -->
<text>{{data.exeRet}}</text>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script setup lang="uts">
import { ItemType } from '@/components/enum-data/enum-data-types'
type IconItemType = {
value : "success" | "error" | "fail" | "exception" | "loading" | "none";
name : string
}
type PositionItemType = {
value : "top" | "center" | "bottom";
name : string
}
type DataType = {
title: string;
exeRet: string;
imageSelect: boolean;
maskSelect: boolean;
intervalSelect: number;
position_current: number;
position_enum: PositionItemType[];
icon_current: number;
icon_enum: IconItemType[];
}
// 使用reactive包装数据，避免ref数据在自动化测试中无法获取
const data = reactive({
title: 'toast',
exeRet: '',
imageSelect: false,
maskSelect: false,
intervalSelect: 1500,
position_current: 0,
position_enum: [
{ "value": "top", "name": "top: 居上显示（Android 暂不支持）" },
{ "value": "center", "name": "center: 居中显示（Android 暂不支持）" },
{ "value": "bottom", "name": "bottom: 居底显示" },
],
icon_current: 0,
icon_enum: [
{
value: 'success',
name: '显示成功图标',
},
{
value: 'error',
name: '显示错误图标',
},
{
value: 'loading',
name: '显示加载图标',
},
{
value: 'none',
name: '不显示图标',
},
],
} as DataType)
const iconOptions = computed(() : ItemType[] => {
return data.icon_enum.map((item, index) : ItemType => {
return {
value: index,
name: item.name,
checked: index == data.icon_current
}
})
})
const positionOptions = computed(() : ItemType[] => {
return data.position_enum.map((item, index) : ItemType => {
return {
value: index,
name: item.name,
checked: index == data.position_current
}
})
})
let isAutoTest = false
onLoad((options : OnLoadOptions) => {
isAutoTest = options['autoTest'] == 'true'
})
onMounted(() => {
const duration = isAutoTest ? 10000 : 3000
uni.showToast({
title: 'onMounted 调用示例,3秒后消失',
duration: duration
})
if (!isAutoTest) {
setTimeout(function () {
uni.hideToast()
}, duration);
}
})
//自动化测试例专用
const jest_getWindowInfo = () : GetWindowInfoResult => {
return uni.getWindowInfo();
}
const radioChangeIcon = (value : number) => {
data.icon_current = value
}
const change_image_boolean = (value : boolean) => {
data.imageSelect = value
}
const change_mask_boolean = (value : boolean) => {
data.maskSelect = value
}
const sliderChange = (e : UniSliderChangeEvent) => {
data.intervalSelect = e.detail.value
}
const radioChangePosition = (value : number) => {
data.position_current = value
}
const toast1Tap = () => {
uni.showToast({
title: "默认",
icon: data.icon_enum[data.icon_current].value,
duration: data.intervalSelect,
image: data.imageSelect ? "/static/test-image/logo.png" : null,
mask: data.maskSelect,
success: (res) => {
// console.log('success:',res)
data.exeRet = "success:" + JSON.stringify(res)
},
fail: (res) => {
data.exeRet = "fail:" + JSON.stringify(res)
},
})
}
const toast3Tap = () => {
uni.showToast({
title: "默认",
icon: 'none',
duration: data.intervalSelect,
image: data.imageSelect ? "/static/test-image/logo.png" : null,
mask: data.maskSelect,
success: (res) => {
// console.log('success:',res)
data.exeRet = "success:" + JSON.stringify(res)
},
fail: (res) => {
data.exeRet = "fail:" + JSON.stringify(res)
},
})
}
// #ifdef APP
const toast2Tap = () => {
let positionValue = data.position_enum[data.position_current].value
uni.showToast({
title: "显示一段轻提示,position:" + positionValue,
position: positionValue,
duration: data.intervalSelect,
success: (res) => {
data.exeRet = "success:" + JSON.stringify(res)
},
fail: (res) => {
data.exeRet = "fail:" + JSON.stringify(res)
},
})
}
// #endif
const hideToast = () => {
uni.hideToast()
}
defineExpose({
data,
toast1Tap,
toast3Tap,
// #ifdef APP
toast2Tap,
// #endif
hideToast
})
</script>
