mp-colorui/dist/h5/components/input/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）

import Nerv from "nervjs";
import { Image, Input, View } from '@tarojs/components';
import Taro from "@tarojs/taro-h5";
import ClButton from "../button/index";
import ClIcon from "../icon/index";
let normalType;

class ClInput extends Taro.Component {
  render() {
    const props = this.props;

    const onChange = event => {
      props.onChange && props.onChange(event.detail.value);
    };
    const onBlur = event => {
      props.onBlur && props.onBlur(event.detail.value);
    };
    const onFocus = event => {
      props.onFocus && props.onFocus(event.detail.value);
    };
    const onIconClick = event => {
      props.onIconClick && props.onIconClick(event);
    };
    const onImageClick = event => {
      props.onImageClick && props.onImageClick(event);
    };
    if (props.type !== 'password') {
      normalType = props.type;
    }
    const iconComponent = props.icon ? <View onClick={onIconClick}>
      <ClIcon {...props.icon} />
    </View> : '';
    const buttonComponent = props.button ? <ClButton {...props.button} /> : '';
    const imageComponent = props.image ? <View onClick={onImageClick} style={{}}>
      <Image src={props.image || ''} mode="aspectFit" style={{
        maxWidth: Taro.pxTransform(100),
        maxHeight: Taro.pxTransform(100)
      }} />
    </View> : '';
    const { title, placeholder, value, adjustPosition, type, maxLength, disabled, renderCustomRight } = props;
    return <View className="cu-form-group">
      <View className="title">{title}</View>
      <Input placeholder={placeholder} value={value} onInput={onChange} onBlur={onBlur} onFocus={onFocus} adjustPosition={adjustPosition} type={normalType} password={type === 'password'} maxLength={maxLength || -1} disabled={disabled} />
      {iconComponent}
      {buttonComponent}
      {imageComponent}
      {renderCustomRight}
    </View>;
  }

}

ClInput.options = {
  addGlobalClass: true
};
ClInput.defaultProps = {
  value: '',
  placeholder: '',
  type: 'text',
  adjustPosition: true
};
export default ClInput;