Toast 轻提示

轻量级反馈/提示，适合用于页面转场、数据交互的等场景中。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<view class="t-wrap">
			<view class="t-page__bd t-page__spacing">
				<t-button margin="24rpx" type="primary" @click="showToast(1)">带图标提示</t-button>
				<t-button margin="24rpx" type="error" :bold="true" @click="showToast(2)">无图标提示
				</t-button>
				<t-button type="primary" margin="24rpx" :bold="true" @click="showToast(3)">自定义内容
				</t-button>
			</view>
			<t-toast ref="toast" :radius="16"></t-toast>

			<!--自定义内容-->
			<t-toast ref="toastRef">
				<view class="t-toast__custom">
					<t-icon name="error-circle-fill" color="#fff"></t-icon>
					<text class="t-toast__txt">操作成功</text>
				</view>
			</t-toast>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	import { ComponentPublicInstance } from 'vue'
	export default {
		data() {
			return {

			}
		},
		methods: {
			showToast(type : number) {
				let options = {} as UTSJSONObject
				if (type == 3) {
					//写法一：仅在easycom模式下使用
					(this.$refs['toastRef'] as TToastComponentPublicInstance).show(options)
				} else {
					if (type == 1) {
						options['icon'] = 'error-circle-fill'
						// options['src'] = "";
						options['text'] = '请输入姓名';
					} else if (type == 2) {
						options['text'] = '请输入手机号';
					}
					//写法二
					(this.$refs['toast'] as ComponentPublicInstance).$callMethod('show', options)
				}
			}
		}
	}
</script>

<style>
	.t-page__bd,
	.t-toast__custom {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.t-toast__txt {
		font-size: 32rpx;
		color: #FFFFFF;
		padding-top: 12rpx;
	}
</style>

Props

名称	描述	类型	默认值	可选值
padding	提示框的内边距	String	'32rpx'	-
background	提示框的背景颜色	String	'rgba(0,0,0,.6)'	-
width	图标宽度（高度与宽度一致），单位rpx	Number	64	-
radius	图标圆角大小，单位rpx	Number	0	-
size	提示信息字体大小，单位rpx	Number	30	-
color	提示信息文本颜色	String	'#fff'	-
position	提示信息显示位置	String	'center'	'center', 'bottom'
zIndex	提示框的z-index值	Number	1001	-

方法

名称	描述	参数
show	显示提示信息	(options: UTSJSONObject)

Slots

事件名	描述
default	默认插槽