✨ [Feature]: 关于 Toast.loading 组件关闭

[ameegle]

What is the new or updated feature that you are suggesting?

目前toast关闭通过实例或全局方法clear完成, 在实际中遇到以下情况:

 const patchHandler = () => {
    let loading: ToastReturnType;
    form.validateFields(['zjlx', 'zjhm']).then(({ zjlx, zjhm }) => new Promise<void>((resolve) => {
      console.log(zjlx, zjhm);
      loading = Toast.loading({ message: '匹配中...', duration: 0, position: 'top', forbidClick: true });
      setTimeout(() => {
        Toast.info({ message: '未能查询到上报信息\n请手动填写', position: 'top' });
        resolve();
      }, 3000);
    })
    ).catch(console.log).finally(() => {
      loading?.clear();
      // Toast.clear();
    });
  }

使用Toast.clear()方法, 会把刚刚创建的Toast.info组件给清除了 所以有个想法Toast.clear()替换成Toast.clear(type?:ToastType), 根据传入的type来匹配移除.

Why should this feature be included?

export declare type ToastReturnType = {
    /** 动态更新方法 */
    config: React.Dispatch<React.SetStateAction<ToastProps>>;
    /** 清除单例toast */
    clear: () => void;
};

Toast中的'loading' | 'success' | 'fail' | 'info' 都返回一个ToastReturnType, 里面包含一个clear方法, 再加上全局的clear方法, 总体上有点混乱. 可不可以归总成一个方法挂载到Toast上, 如:Toast.clear(type?:ToastType)

[3lang3]

@ameegle 可以开启toast的多例模式

import React from 'react'
import { Cell, Toast, Switch } from 'react-vant'

type ToastReturnType  = {
  clear: () => void;
}

Toast.allowMultiple(true)

let t1: ToastReturnType;
let t2: ToastReturnType;

export default () => {
  return (
    <>
      <Cell
        title='第一个Toast'
        isLink
        onClick={() =>
          t1 = Toast({
            message: '第一个Toast',
            duration: 0,
            position: 'top'
          })
        }
      />
      <Cell
        title='第二个Toast'
        isLink
        onClick={() =>
          t2= Toast({
            message: '第二个Toast',
            duration: 0,
            position: 'bottom'
          })
        }
      />

      <Cell
        title='清除第一个Toast'
        isLink
        onClick={() =>
          t1.clear()
        }
      />
      <Cell
        title='清楚第二个Toast'
        isLink
        onClick={() =>
          t2.clear()
        }
      />
    </>
  )
}