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

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

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { Textarea, View } from "@tarojs/components";
import ClFlex from "../flex/index";
import ClText from "../text/index";
import ClLayout from "../layout/index";
import { classNames } from "../../lib/index";
import "./index.scss";
import { BG_COLOR_LIST } from "../../lib/model";
export default class ClTextarea extends Taro.Component {
  render() {
    const props = this.props;

    const { value, autoFocus, focus, placeholder, maxLength, disabled, showConfirmBar, showLengthTip, bgColor, shadow, height, overMaxForbidden, onChange, onFocus, onBlur, onConfirm, onLineChange } = props;
    const [tempValue, setTempValue] = Taro.useState("");
    const tip = <View className={"tip"}>
      <ClLayout padding={"small"} paddingDirection={"right"}>
        <ClFlex>
          <ClText text={`${tempValue.length}`} size={"small"} textColor={maxLength && !overMaxForbidden && maxLength < tempValue.length ? "red" : undefined} />
          <View>
            <ClText text={`/${maxLength}`} size={"small"} textColor={maxLength && !overMaxForbidden && maxLength < tempValue.length ? "red" : undefined} />
          </View>
        </ClFlex>
      </ClLayout>
    </View>;
    Taro.useEffect(() => {
      setTempValue(value || "");
    }, [value]);
    return <View className={classNames(["cu-textarea"])}>
      <View className={classNames(["bg", { shadow }, BG_COLOR_LIST[bgColor || "white"]])}>
        <Textarea style={{
          height: `${height ? Taro.pxTransform(height) : Taro.pxTransform(300)}`,
          padding: `${Taro.pxTransform(10)} ${Taro.pxTransform(14)} ${Taro.pxTransform(40)}`,
          width: "100%",
          border: "none"
        }} className={classNames([BG_COLOR_LIST[bgColor || "white"]])} value={value || ""} autoFocus={autoFocus} focus={focus} placeholder={placeholder} maxlength={overMaxForbidden ? maxLength : undefined} disabled={disabled} showConfirmBar={showConfirmBar} onLineChange={e => {
          onLineChange && onLineChange(e.detail);
        }} onConfirm={e => {
          onConfirm && onConfirm(e.detail.value);
        }} onInput={e => {
          setTempValue(e.detail.value);
          onChange && onChange(e.detail.value);
        }} onFocus={e => {
          onFocus && onFocus(e.detail.value);
        }} onBlur={e => {
          onBlur && onBlur(e.detail.value);
        }} />
        {showLengthTip ? tip : ""}
      </View>
    </View>;
  }

}
ClTextarea.options = {
  addGlobalClass: true
};
ClTextarea.defaultProps = {
  value: "",
  autoFocus: false,
  focus: false,
  placeholder: "",
  maxLength: 0,
  disabled: false,
  showConfirmBar: false,
  showLengthTip: false,
  height: 0,
  overMaxForbidden: false,
  bgColor: "white",
  shadow: false,
  onChange: () => {},
  onFocus: () => {},
  onBlur: () => {},
  onConfirm: () => {},
  onLineChange: () => {}
};