@antmjs/vantui/es/form-item/message.js

一套适用于Taro3及React的vantui组件库

import { useMemo } from 'react';
import { View } from '@tarojs/components';
import { jsx as _jsx } from "react/jsx-runtime";
export default function Message(props) {
  var status = props.status,
    message = props.message,
    _props$feedback = props.feedback,
    feedback = _props$feedback === void 0 ? 'failed' : _props$feedback,
    className = props.className;
  var config = useMemo(function () {
    var mess = '';
    var color = '#fff';
    var ifShow = false;

    // 优先处理特殊反馈模式
    if (feedback === 'hidden') {
      return {
        color: color,
        mess: mess,
        ifShow: false
      };
    }

    // 通用条件判断
    switch (status) {
      case 'pendding':
        mess = '';
        break;
      case 'reject':
        if (['failed', 'all'].includes(feedback)) {
          mess = message || '';
          color = 'red';
          ifShow = true;
        }
        break;
      case 'resolve':
        if (['success', 'all'].includes(feedback)) {
          mess = '校验通过';
          color = 'green';
          ifShow = true;
        }
        break;
    }

    // 处理'all'模式的覆盖逻辑
    if (feedback === 'all') {
      ifShow = true;
    }
    return {
      color: color,
      mess: mess,
      ifShow: ifShow
    };
  }, [status, message, feedback]);
  return /*#__PURE__*/_jsx(View, {
    className: "vant-form-message ".concat(config.ifShow ? "vant-form-message-show" : '', " ").concat(className),
    style: {
      color: config.color
    },
    children: config.mess
  });
}