Toast 消息提示

Toast 组件主要用于消息通知、加载提示、操作结果提示等醒目提示效果，我们为其提供了多种丰富的API。

基本用法

toast.value.show({
  icon:{name:'success',color:'c-t-success'},
  iconPosition: 'top',
  msg: [{text:'恭喜你，提交成功',fontSize:16,cClass:['c-mb-5']},'我们会尽快与您取得联系'],
  duration: 3000
}).then(()=>{
  console.log('关闭了')
})

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
msg	String,Object,Array	null	显示的消息文本 为object参照c-text的props	All
bgColor	String	rgba(17, 17, 17, 0.7)	自定义颜色 支持c-bg-开头的主题色 -支持linear-gradient(tobottomright,#AD18F9,#05DFC7)渐变色，只支持两种颜色的渐变	All
icon	String,Object	null	icon 为object参照c-icon的props	All
iconPosition	String	left	icon位置，left,top	All
position	String	center	位置，top,bottom,center	All
duration	String,Number	2000	展示时间，单位ms	All
color	String	#fff	文字颜色	All
radius	Number,String,Array	10rpx	圆角	All
msgProps	Object	{}	消息文本的默认配置	All
cStyle	Object	{}	自定义样式	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

事件

事件名	说明
click

方法

名称	说明
show(null|props)	打开Toast 传递props时，将覆盖组件props，返回一个Promise对象
warning(null|props)	返回一个Promise对象
primary(null|props)	返回一个Promise对象
success(null|props)	返回一个Promise对象
danger(null|props)	返回一个Promise对象
info(null|props)	返回一个Promise对象

示例

<template>
  <c-toast ref="toast" />
  <c-btn text="打开" @click="open()" />
</template>
<script setup>
import {ref} from 'vue';

const toast = ref(null);
function open() {
  toast.value.show({
    icon:{name:'success',color:'c-t-success'},
    iconPosition: 'top',
    msg: [{text:'恭喜你，提交成功',fontSize:16,cClass:['c-mb-5']},'我们会尽快与您取得联系'],
    duration: 3000
  }).then(()=>{
    console.log('关闭了')
  })
}
</script>