Toast 轻提示

概述

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

使用指南

在.vue中引入组件

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

在main.js中引入样式文件

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

示例

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

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

<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