Toast 轻提示

轻量级消息提示组件，支持多种状态和位置

演示

9:41

代码示例

<!-- 操作 -->
  <re-button theme="primary" @click="visible = true">显示提示</re-button>

<!-- 事件日志 -->
  <re-toast :key="current" :visible="visible" :message="currentConfig.message" :theme="currentConfig.theme" :placement="currentConfig.placement" :icon="currentConfig.icon" :closeBtn="currentConfig.closeBtn" :direction="currentConfig.direction" @update:visible="onUpdateVisible" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-toast />。

API

Toast Props

名称	类型	默认值	描述	必传
visible	`boolean`	false	是否显示	N
message	`string`	""	提示内容	N
theme	`string`	"default"	提示类型	N
direction	`string`	"row"	排列方向	N
placement	`string`	"middle"	显示位置	N
duration	`number`	2000	显示时长(ms)，0为不自动关闭	N
icon	`string`	""	自定义图标	N
closeBtn	`boolean`	false	是否显示关闭按钮	N
overlay	`boolean`	false	是否显示遮罩层	N
zIndex	`number`	1000	层级	N
customStyle	`string`	""	自定义样式	N

Toast Events

名称	参数	描述
close	-	关闭时触发
show	-	显示时触发
update:visible	value: boolean	显隐变化时触发

Toast Slots

名称	描述
-	-

SwipeCell 滑动单元格

参考 TDesign 最终示例，使用 re-cell 组合出单侧、双侧与图标操作场景。

AddressList 地址列表

地址列表组件，用于展示和管理收货地址，支持选择、新增、编辑、删除

内容锚点

演示
代码示例
引入
API