toast提示

toast提示:带icon提示,可隐藏,居中显示。

组件结构

 <template>
 	<view class="tui-toast" :class="[visible?'tui-toast-show':'',content?'tui-toast-padding':'',icon?'':'tui-unicon-padding']" :style="{width:getWidth(icon,content)}">
 		<image :src="imgUrl" class="tui-toast-img" v-if="icon"></image>
 		<view class="tui-toast-text" :class="[icon?'':'tui-unicon']">{{title}}</view>
 		<view class="tui-toast-text tui-content-ptop" v-if="content && icon">{{content}}</view>
 	</view>
 </template>

组件脚本

<script>
	export default {
		name: "tuiToast",
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
- - - -

methods

名称 描述
show 显示toast提示框,调用使用 this.$refs.toast.show(params) 方式,params参数详细如下所示:

方法中 params(object)

名称 描述
title 显示标题内容
imgUrl icon地址
icon 是否有icon
duration 显示时间 ms

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/toast/toast

H5二维码

小程序二维码