> For the complete documentation index, see [llms.txt](https://iview-mpvue.gitbook.io/iview-mpvue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iview-mpvue.gitbook.io/iview-mpvue/cao-zuo-fan-kui/toast-qing-ti-shi.md).

# 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    |