增加灰色背景的多行的textareaItem

baseComponents/FormArray/index.js

@@ -3,6 +3,7 @@ import { DatePicker, Picker, TextareaItem, InputItem, List, Switch } from 'antd-
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import FieldList from '@/H5Public/baseComponents/FieldList';
+import TextareaItemMultiRows from '../TextareaItemMultiRows'
 
 
 const DiyInput = (props) => {
@@ -30,7 +31,7 @@ const DiyInput = (props) => {
 };
 
 const DiyTextarea = (props) => {
-  let { config, formValue, changeValue } = props;
+  let { config, formValue, changeValue, noLengthLimit, rows, } = props;
   if (config.readOnly) {
     config.placeholder = '';
   } else {
@@ -196,6 +197,15 @@ class FormArray extends Component {
               changeValue={this.changeValue}
             />
           );
+        case 'TextareaItemMultiRows':
+          return (
+            <TextareaItemMultiRows
+              key={x.key}
+              config={x}
+              value={formValues[x.key]}
+              onChange={val => this.changeValue(val, x.key)}
+            />
+          )
         case 'Picker':
           return (
             <DiyPicker

baseComponents/TextareaItemMultiRows/index.js

+import { TextareaItem } from 'antd-mobile';
+import styles from './index.less';
+
+export default function TextareaItemMultiRows({config, value, onChange}) {
+  const { name, readOnly, rows, required, ...rest } = config;
+  let { placeholder } = config;
+  if (readOnly) {
+    placeholder = '';
+  } else {
+    placeholder = placeholder || '点击输入';
+  }
+  return (
+    <div className={styles.container}>
+      <div className={styles.label}>
+        <span style={{ color: required ? 'red' : 'inherit' }}>*&nbsp;</span>
+        {name}
+      </div>
+      <TextareaItem
+        rows={rows}
+        placeholder={placeholder}
+        editable={!readOnly}
+        value={value}
+        onChange={onChange}
+        {...rest}
+      />
+    </div>
+  );
+}

baseComponents/TextareaItemMultiRows/index.less

+.container {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: #ddd;
+    display: block;
+    z-index: 1;
+    top: auto;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    transform-origin: 50% 100%;
+    transform: scaleY(0.3);
+  }
+  .label {
+    font-size: 17px;
+    padding: 15px 0 0 15px;
+  }
+  :global {
+    textarea {
+      background: rgba(238, 238, 238, 1);
+      border-radius: 0.12rem;
+      padding: 0.25rem;
+    }
+  }
+}