Toast 轻提示

使用指南

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

• 一次只显示一个 toast。
• 有 Icon 的 Toast，字数为 4-6 个；没有 Icon 的 Toast，字数不宜超过 14 个。

TIP

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

代码演示

查看代码

<template>
  <div class="list">
    <h3-button @click="showToast1" type="primary">
      text only
    </h3-button>
    <br />
    <h3-button @click="showToast('This is a toast tips without mask !!!', '', 2000, false)" type="primary">
      without mask
    </h3-button>
    <br />
    <h3-button @click="showToast('成功提示', 'check-circle-o')" type="primary">
      success
    </h3-button>
    <br />
    <h3-button @click="showToast('Load failed !!!', 'close-circle-o')" type="primary">
      Fail
    </h3-button>
    <br />
    <h3-button @click="showToast('network connectioned failure! ', 'dislike')" type="primary">
      network failure
    </h3-button>
    <br />
    <h3-button @click="showToast('loading...', 'loading')" type="primary">
      loading
    </h3-button>
    <br />
    <h3-button @click="showToastWifi('请检查您的网络', 'wifi')" type="primary">
      wifi
    </h3-button>
    <br />
    <h3-button
      @click="
        showToast(
          '请检查您的网络请检查您的网络请检查您的网络请检查您的网络请检查您的网络请检查您的网络请检查您的网络请检查您的网络请检查您的网络',
          '',
        )
      "
      type="primary"
    >
      长文字无图模式
    </h3-button>
    <br />
    <h3-toast
      :visible="show1"
      @hide="hideToast1"
      :auto-hide="true"
      :duration="3000"
      text="This is a toast tips !!!"
      mask
    />

    <h3-button @click="showToastNotauto" type="primary">
      手动关闭
    </h3-button>
    <br />
    <h3-button @click="hideToast" type="primary" style="z-index: 99999;position: relative;">
      手动关闭按钮
    </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;
    },
    hideToast1 (val) {
      this.show1 = val;
      console.log('show2.....');
    },
    showToast (text, icon, iduration, bmask) {
      console.log(`${text}..${icon}..${iduration}..${bmask}`);
      this.$toast.show({
        text,
        icon,
        duration: iduration === undefined ? 1000 : iduration,
        mask: bmask === undefined ? true : bmask,
        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: 'close',
        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>

与h3-mobile-vue组件的区别以及迁移

为了统一对弹出层式组件的底层实现，因此对toast组件进行了重写，如果要做迁移，请参考：

1. 已废弃的props：onHide，请直接监听event:hide

2. 替换的props：

   • value => visible
   • iconType => icon

3. 替换的events:

   • on-show => show
   • on-hide => hide

4. 新增的events:

   • toggle

5. 作为插件可以直接调用到this.$toast，废弃了window.toast，请直接使用实例上的$toast方法

6. 插件方法 shown => visible

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, 若为loading则将加载中图标	String	无
duration	自动关闭的延时，单位毫秒	Number	3000
mask	是否显示透明蒙层，防止触摸穿透	Boolean	true
autoHide	是否自动隐藏，如果不是可以通过手动设置visible为false隐藏，插件式调用可以调用this.$toast.hide()	Boolean	true

Event

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

函数式调用

引用

import Vue from 'vue';
import {H3Toast} from '@h3/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	是否显示	-