Antd Mobile Design輸入框元件InputItem錯誤顯示方式封裝

luozz發表於2019-01-08
元件封裝
antd-mobile預設的是輸入框錯誤處理方式為在輸入框右側顯示錯誤圖示，點選圖示觸發繫結的onErrorClick事件，這樣顯得不夠直觀，現想利用現有元件引數對其進行封裝，達到在右側不顯示錯誤圖示，將錯誤資訊顯示到輸入框下側。

官方文件元件地址

Antd Mobile Design --> InputItem

原元件效果

原元件錯誤提示效果

封裝後效果

封裝後錯誤提示效果

具體變更及實現點（具體可以看下面的封裝程式碼，一看就明白）

  • props引數

    • onErrorClick：原來繫結的是一個點選事件，為了可以不新增多餘的屬性，且充分利用該屬性(因為右側錯誤圖示不需要後，該事件便無效了)，現在變為傳入一個錯誤陣列或者字串，用於顯示錯誤提示資訊
    • tipStyle：自定義錯誤提示語的樣式，可以不傳入，會使用封裝內預設的提示樣式，傳入則增加或覆蓋已有樣式
    • 其它引數和官方文件一模一樣，文件上怎麼用就怎麼用

  • 錯誤提示文字的顯示位置

    • 目前封裝的是顯示位置和輸入框輸入部分對齊，其實實現方式是複用了InputItem的元件樣式
注意元件內使用InputItem時將error={false}放在後面，這樣就能避免顯示出右側的錯誤圖示，原理不用多說大家應該也懂的^_^ ^_^

完整程式碼

import React, { Component } from 'react';
import { InputItem } from 'antd-mobile';

const cls = 'trust-mobile-input';

class MobileInputItem extends Component {
    render() {
        const {type = 'text', labelNumber = 5, error = false, children = '', onErrorClick = '', tipStyle = {}, ...other} = this.props;
        const errorTipStyle = {
            color: '#f5222d',
            padding: '5px 0px',
            textAlign: 'left',
            position: 'relative',
            fontSize: 12,
            ...tipStyle
        }
        return (
            <div className={cls}>
                <InputItem type={type} {...other} error={false}>{children}</InputItem>
                {
                    error &&
                    <div className="am-list-item" style={{height: 'auto', minHeight: 0}}>
                        {
                          children && <div className={`am-input-label am-input-label-${labelNumber}`}></div>
                        }
                        <div className="am-input-control">
                            <div style={{...errorTipStyle}}>
                                {onErrorClick}
                            </div>
                        </div>
                    </div>
                    }
            </div>
        )
    }
}

export default MobileInputItem;

引入使用時注意事項

使用示例

結尾寄語

  • 本封裝更多的是提供一種另類錯誤提示方式的實現方法，大家可以各抒己見進行更多細節的封裝，例如錯誤的顯示隱藏過渡效果，錯誤時輸入框文字顏色等等
  • 不懂或不足之處，歡迎留言互相探討學習！

相關文章