# 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二维码

# 小程序二维码