this.$toast() 玩转小提示框，前后端工程师都爱用的利器！

2024-02-01 19:56:58

this.$toast() 简介

this.$toast() 是 Vue.js 官方提供的组件，它可以轻松创建各种类型的提示消息，如成功提示、错误提示、警告提示等。它支持多种样式和自定义选项，并且可以轻松集成到任何 Vue.js 项目中。

this.$toast() 用法

this.$toast() 的基本用法如下：

this.$toast(message, options);

其中：

message：要显示的提示消息。
options：可选参数，用于自定义提示框的样式和行为。

this.$toast() 选项

this.$toast() 提供了多种选项，用于自定义提示框的样式和行为。这些选项包括：

type：提示框的类型，可以是 "success"、"error"、"warning" 或 "info"。
position：提示框的位置，可以是 "top-left"、"top-center"、"top-right"、"bottom-left"、"bottom-center" 或 "bottom-right"。
duration：提示框显示的持续时间，单位是毫秒。
closable：是否允许用户关闭提示框。
icon：提示框的图标。
title：提示框的标题。
message：提示框的内容。

this.$toast() 示例

以下是一些使用 this.$toast() 的示例：

// 显示一个成功提示
this.$toast("操作成功", {
  type: "success",
  duration: 3000
});

// 显示一个错误提示
this.$toast("操作失败", {
  type: "error",
  duration: 5000
});

// 显示一个警告提示
this.$toast("请确认操作", {
  type: "warning",
  duration: 3000
});

// 显示一个信息提示
this.$toast("这是一条信息", {
  type: "info",
  duration: 3000
});