Taro 解决微信提供的toast 只能显示两行的问题

最新推荐文章于 2024-09-05 15:18:35 发布

蓉妹妹

最新推荐文章于 2024-09-05 15:18:35 发布

阅读量800

点赞数 1

文章标签： taro 微信

本文链接：https://blog.csdn.net/weixin_43517190/article/details/137220356

版权

通常在Taro中我们提示语基本都采用

showToast({ title: '提示语', icon: 'none' });

但在开发微信小程序中，避免不了一些功能提示语过长
再使用showToast，就会出现只展示出前两行的问题，展示不完整，
所以最后自己写了一个toast

import React from 'react';
import Modal from '@/components/Modal/Modal';
import { ModalLevel } from '@/components/Modal/types';
import { Text, View } from '@tarojs/components';
import './index.scss';

const prefix = 'toast';
/**
 * 自定义 - 解决微信提供的toast 只能显示两行的问题
 */
export const Toast = {
  renderToast: (title: string) => {
    const innerClassNames = {
      text: `${prefix}__text`
    };
    return (
      <View className={prefix}>
        <Text className={innerClassNames.text}>{title}</Text>
      </View>
    );
  },
  // FIXME: Toast应与Modal用不同的Sibling，不应该使用Modal直接实现
  show(title: string, duration = 2000) {
    Modal.modal({
      node: this.renderToast(title),
      level: ModalLevel.Market,
      options: {
        maskBgColor: 'transParent'
      }
    });
    setTimeout(() => {
      Modal.destroy();
    }, duration);
  }
};

样式，和微信提示语一致

.toast{
  padding: 20px 20px;
  max-width: 450px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  &__text{
    font-size: 13px * 2;
    color: $line-color;
  }
}