Toast 提示框

常用于主动操作后的反馈提示。

基本用法

通过全局方法,tomui为 Vue.prototype 添加了全局方法 $toast

默认从顶部的位置出现,可选中间或者底部弹出,5 秒后自动消失,也可以主动点击关闭按钮使其提前消失。

示例代码

<t-button @click="$toast('我被点击了')">顶部弹出</t-button>
<t-button @click="$toast('我被点击了',{position:'middle'})">中间弹出</t-button>
<t-button @click="$toast('我被点击了',{position:'bottom'})">底部弹出</t-button>

自定义关闭按钮,与自动关闭功能

示例代码

<template>
  <div>
    <t-button @click="showToast1">弹出一个无法自动关闭的提示</t-button>
  </div>
</template>

<script>
import Vue from 'vue'
import plugin from '../../../src/plugin';
import Button from "../../../src/Button";
Vue.use(plugin)
export default {
  components: {
    't-button': Button,
  },
  methods: {
    showToast1(){
      this.$toast('我无法自动关闭请点击我的关闭按钮',{
        closeButton:{
          text:'快点击我吧',//关闭按钮文本
          callback(){     //关闭后回调函数
            console.log('我被关闭了');
          }
        },
        autoClose:false//控制是否自动关闭
      })
    }
  }
};
</script>

传入HTML标签

示例代码

<template>
  <div>
    <t-button @click="showToast2">传入一个加粗的文本</t-button>
  </div>
</template>

<script>
import Vue from 'vue'
import plugin from '../../../src/plugin';
import Button from "../../../src/Button";
Vue.use(plugin)
export default {
  components: {
    't-button': Button,
  },
  methods: {
    showToast2(){
      this.$toast('<strong style="color:#eeeeee;">加粗的文本</strong>',{
        enableHtml:true,//控制是否接收html标签
      })
    }
  }
};
</script>

Options

参数	说明	类型	可选值	默认值
message	提示内容,全局方法的第一个参数	String	——	——
propOption	全局方法的第二个参数	Object	autoClose,position, enableHtml,closeButton	——
propOption .autoClose	是否自动关闭,如果自动关闭几秒内关闭	Boolean, Number	——	5
propOption .enableHtml	是否接收HTML标签作为message	Boolean	true,false	false
propOption .position	设置位置	String	top,middle,bottom	top
propOption .closeButton	自定义关闭按钮	Objcet	text,callback	——
propOption .closeButton .text	关闭按钮文本	String	——	'关闭'
propOption .closeButton .callback	关闭后回调函数	Fn	——	undefined