# Toast 轻提示

## 概述

一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。

## 使用指南

在.vue中引入组件

```javascript
<script>
import iToast from 'iview-mpvue/dist/components/toast/toast'
export default {
    components: {
        'i-toast': iToast
    }
}
</script>
```

在main.js中引入样式文件&#x20;

```javascript
import 'iview-mpvue/dist/components/toast/style/css'
```

## 示例

{% hint style="info" %}
Toast 组件主要依靠 JavaScript 主动调用，所以只需在 .vue 中添加一个组件，并设置 ref，其余配置在 .js 里完成。
{% endhint %}

```markup
<div>
    <i-button type="ghost" @click="handleText">只显示文本</i-button>
    <i-button type="ghost" @click="handleSuccess">成功</i-button>
    <i-button type="ghost" @click="handleWarning">警告</i-button>
    <i-button type="ghost" @click="handleError">错误</i-button>
    <i-button type="ghost" @click="handleLoading">Loading</i-button>
    <i-button type="ghost" @click="handleIcon">使用图标</i-button>
    <i-button type="ghost" @click="handleImage">使用自定义图片</i-button>
    <i-button type="ghost" @click="handleMask">无遮罩层</i-button>
    <i-toast ref="toast"></i-toast>
</div>
```

```javascript
<script>
    import { $Toast } from 'iview-mpvue/dist/components/base'
    export default {
        ...
        methods: {
            handleText () {
                $Toast(this, {
                  content: '这是文本提示'
                })
            },
            handleSuccess () {
                $Toast(this, {
                  content: '成功的提示',
                  type: 'success'
                })
            },
            handleWarning () {
                $Toast(this, {
                  content: '警告的提示',
                  type: 'warning'
                })
            },
            handleError () {
                $Toast(this, {
                  content: '错误的提示',
                  type: 'error'
                })
            },
            handleLoading () {
                $Toast(this, {
                  content: '加载中',
                  type: 'loading'
                })
            },
            handleIcon () {
                $Toast(this, {
                  content: '使用内置的图标',
                  icon: 'praise'
                })
            },
            handleImage () {
                $Toast(this, {
                  content: '使用自定义图片',
                  image: 'https://i.loli.net/2017/08/21/599a521472424.jpg'
                })
            },
            handleMask () {
                $Toast(this, {
                  content: '5秒后自动关闭',
                  icon: 'prompt',
                  duration: 0,
                  mask: false
                });
                setTimeout(() => {
                    $Toast.hide(this)
                }, 5000)
            }
        }
    }
</script>
```

## API

$Toast properties

| 属性       | 说明                                               | 类型      | 默认值     |
| -------- | ------------------------------------------------ | ------- | ------- |
| context  | Vue实例上下文                                         | Object  | -       |
| content  | 内容                                               | String  | -       |
| type     | 内置的类型，可选值为 default、success、warning、error、loading | String  | default |
| duration | 持续时间，单位秒，设置为 0 则不自动关闭，需调用 $Toast.hide() 方法手动关闭   | Number  | 2       |
| icon     | 自定义图标                                            | String  | -       |
| image    | 自定义图片地址                                          | String  | -       |
| mask     | 是否显示一个隐藏的遮罩层，点击遮罩层可立即关闭组件                        | Boolean | true    |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://iview-mpvue.gitbook.io/iview-mpvue/cao-zuo-fan-kui/toast-qing-ti-shi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.