# Toast 轻提示

# 使用指南

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

一次只显示一个 toast。
纯文字内容的提示，仅支持单行显示，字数控制在16个字以内；文字组合图标提示通常用于标识成功/失败/警告/加载等特殊状态，提示文字单行字数控制在6个以内，双行字数控制在12个以内。

TIP

此组件属于Popup家族组件，查看这篇blogPopup家族, 了解更多

# 代码演示

查看代码
<template>
  <div class="list">
    <h3-button type="primary" @click="showToast1">
      仅文本提示
    </h3-button>
    <br />
    <h3-button type="primary" @click="showToast('位置居上提示', '', 2000, false, 'top')">
      位置居上提示
    </h3-button>
    <br />
    <h3-button type="primary" @click="showToast('位置居下提示', '', 2000, false, 'bottom')">
      位置居下提示
    </h3-button>
    <br />
    <h3-button
      type="primary"
      @click="
        showToast(
          '请检查您的网络请检查您的网络请检查您的网络请检查您的网络请检查您的网络请检查您的网络请检查您的网络请检查您的网络请检查您的网络',
          '',
        )
      "
    >
      长文字无图模式
    </h3-button>
    <br />
    <h3-button type="primary" @click="showToast('成功文字提示', 'IconTickCircleStroke')">
      success
    </h3-button>
    <br />
    <h3-button type="primary" @click="showToast('失败警告提示', 'IconWarningStroke')">
      warn
    </h3-button>
    <br />
    <h3-button type="primary" @click="showToast('加载中', 'IconLoadingStroke')">
      loading
    </h3-button>
    <br />
    <h3-button type="primary" @click="showToast('操作失败提示', 'IconCrossCircleStroke')">
      fail
    </h3-button>
    <br />
    <h3-button type="primary" @click="showToastWifi('文字提示长度最多十六个字', 'IconWarningStroke')">
      长文字图标组合提示
    </h3-button>
    <br />
    <h3-toast
      :visible="show1"
      :autoHide="true"
      :duration="3000"
      text="文本提示"
      mask
      @hide="hideToast1"
    />
    <h3-button type="primary" @click="showToastNotauto">
      手动关闭
    </h3-button>
    <br />
    <h3-button type="primary" style="z-index: 99999; position: relative" @click="hideToast">
      手动关闭按钮
    </h3-button>
  </div>
</template>

<script>
import H3Button from '@/components/h3-button/';
import H3Toast from '@/components/h3-toast/';

export default {
  name: 'Toast',
  components: {
    H3Toast,
    H3Button,
  },
  data () {
    return {
      show: false,
      show1: false,
    };
  },
  destroyed () {
    this.hideToast();
  },
  methods: {
    showToast1 () {
      this.show1 = true;
      // H3Toast.show({
      //   text: 'test',
      // })
    },
    hideToast1 (val) {
      this.show1 = val;
      console.log('show2.....');
    },
    showToast (text, icon, iduration, bmask, placement) {
      console.log(`${text}..${icon}..${iduration}..${bmask}..${placement}`);
      this.$toast.show({
        text,
        icon,
        duration: iduration === undefined ? 1000 : iduration,
        mask: bmask === undefined ? true : bmask,
        placement: placement,
        onShow () {
          console.log('show2.....');
        },
        onHide () {
          console.log('hide2......');
        },
      });
      console.log(this.$toast.visible());
    },
    showToastWifi (text, icon, iduration) {
      this.$toast.show({
        text,
        icon,
        duration: iduration === undefined ? 1000 : iduration,
        mask: false,
        onShow () {
          console.log('show2.....');
        },
      });
      console.log(this.$toast.visible());
    },

    showToastNotauto (text, icon, iduration, bmask) {
      this.$toast.show({
        text: '手动关闭',
        icon: 'IconCrossStroke',
        duration: iduration === undefined ? 1000 : iduration,
        mask: bmask === undefined ? true : bmask,
        autoHide: false,
        onShow () {
          console.log('手动关闭开');
        },
      });
    },
    hideToast () {
      this.$toast.hide();
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
}
</style>

# 与thinking-ui 2.0版组件的区别以及迁移

按照新的toast组件规范修改相关样式

# API

# 常规使用

<h3-toast v-model="visible" text="This is a toast tips !!!" />

# Prop

属性	说明	类型	默认值
visible	是否显示，`v-model`绑定值	Boolean	false
maskClosable	点击蒙层是否可触发关闭	Boolean	false
maskCls	mask蒙层自定义class	string	无
wrapCls	wrap弹窗内容区域的自定义class	string	无
getRenderContainer	把组件挂载某个地方,函数请返回节点,字符串默认通过`document.querySelector`查找	Function=> Node / String	document.body
text	提示内容	String	无
icon	提示Icon, 若为`IconLoadingStroke`则将加载中图标动态旋转	String	无
duration	自动关闭的延时，单位毫秒	Number	3000
mask	是否显示透明蒙层，防止触摸穿透	Boolean	true
autoHide	是否自动隐藏，如果不是可以通过手动设置`visible`为`false`隐藏，插件式调用可以调用`this.$toast.hide()`	Boolean	true
placement	蒙层所处页面位置，可选值`top`,`center`,`bottom`	String	center

# Event

事件名	说明	参数
toggle	切换显示时触发，`v-model`绑定事件	value
show	显示时回调	value：true
hide	隐藏时回调	value：false

# 函数式调用

# 引用


import Vue from 'vue';
import {H3Toast} from '@lateinos/thinking-ui';
Vue.use(H3Toast);

// 显示
this.$toast.show(options:{text: ''} | '', callback?:Function, callback?:Function);

// 隐藏
this.$toast.hide(callback?:Function);

# 方法

方法名	说明	参数
show	显示toast	value: 传入 prop 对象或字符串, callback?: 显示后回调, callback?: 隐藏后回调
hide	隐藏toast	callback?: 隐藏后回调
visible	是否显示	-

← loading 加载 PopupModal 模态弹出框 →