feat: Field add prefix prop

- close #325
3lang3 · Feb 21, 2022 · 17eaee3 · 17eaee3
1 parent 985babd
commit 17eaee3
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 2 deletions.
diff --git a/packages/react-vant/src/field/Field.tsx b/packages/react-vant/src/field/Field.tsx
@@ -403,6 +403,7 @@ const Field = forwardRef<FieldInstance, FieldProps>((props, ref) => {
       )}
     >
       <div className={clsx(bem('body'))}>
+        {props.prefix && <div className={clsx(bem('prefix'))}>{props.prefix}</div>}
         <div className={clsx(bem('control-wrapper'))} onClick={props.onClickInput}>
           {renderInput()}
         </div>

diff --git a/packages/react-vant/src/field/PropsType.ts b/packages/react-vant/src/field/PropsType.ts
@@ -116,6 +116,8 @@ export interface FieldProps extends FieldCommonProps, BaseTypeProps, Partial<Cel
   intro?: React.ReactNode;
   /** 字段提示信息 */
   tooltip?: React.ReactNode | FieldTooltipProps;
+  /** 设置前置内容 */
+  prefix?: React.ReactNode;
   onChange?: (val: string) => void;
   onClear?: (e: React.MouseEvent<HTMLDivElement>) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;

diff --git a/packages/react-vant/src/field/README.md b/packages/react-vant/src/field/README.md
@@ -120,7 +120,7 @@ const [value4, setValue4] = useState('');
 
 ### 插入按钮
 
-通过 button 插槽可以在输入框尾部插入按钮。
+通过 `button` 可以在输入框尾部插入按钮。
 
 ```jsx
 <Field
@@ -134,6 +134,25 @@ const [value4, setValue4] = useState('');
 />
 ```
 
+通过 `prefix` 可以在输入框前面插入内容。
+
+```jsx
+<Field
+  value={sms}
+  center
+  clearable
+  label="短信验证码"
+  placeholder="请输入短信验证码"
+  onChange={setSms}
+  prefix={
+    <div>
+      +86 <Icon name="arrow-down" />
+    </div>
+  }
+  button={<Button size="small" type="primary" />}
+/>
+```
+
 ### 格式化输入内容
 
 通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机，默认在输入时进行格式化。
@@ -253,6 +272,7 @@ const formatter = (value) => value.replace(/\d/g, '');
 | rightIcon | 右侧图标 | _string\|ReactNode_ | - |
 | iconPrefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | button | 自定义输入框尾部按钮 | _ReactNode_ | - |
+| prefix | 设置前置内容 | _ReactNode_ | - |
 
 ### Events
 

diff --git a/packages/react-vant/src/field/demo/index.tsx b/packages/react-vant/src/field/demo/index.tsx
@@ -1,10 +1,12 @@
 /* eslint-disable no-console */
 import React, { useState, useEffect, useRef } from 'react';
-import { Cell, Button, Toast } from 'react-vant';
+import { Popup, Picker, Icon, Cell, Button, Toast } from 'react-vant';
 import { components } from 'site-mobile-demo';
 import Field from '..';
 import './style.less';
 
+const columns = ['86', '87', '88', '89', '90', '91', '92'];
+
 export default (): React.ReactNode => {
   const { DemoBlock, DemoSection } = components;
   const [value1, setValue1] = useState('');
@@ -25,6 +27,9 @@ export default (): React.ReactNode => {
   const [value7, setValue7] = useState('');
   const [value8, setValue8] = useState('');
 
+  const [visible, setVisible] = useState(false);
+  const [field, setVield] = useState('86');
+
   const formatter = (val) => val.replace(/\d/g, '');
 
   const fieldRef = useRef(null);
@@ -136,12 +141,27 @@ export default (): React.ReactNode => {
           label="短信验证码"
           placeholder="请输入短信验证码"
           onChange={setSms}
+          prefix={
+            <div onClick={() => setVisible(true)} className="demo-field-prefix">
+              +{field} <Icon name="arrow-down" />
+            </div>
+          }
           button={
             <Button size="small" type="primary">
               发送
             </Button>
           }
         />
+        <Popup round visible={visible} position="bottom" onClose={() => setVisible(false)}>
+          <Picker
+            title="标题"
+            onConfirm={(value: string) => {
+              setVield(value);
+              setVisible(false);
+            }}
+            columns={columns}
+          />
+        </Popup>
       </DemoBlock>
 
       <DemoBlock card title="格式化输入内容">

diff --git a/packages/react-vant/src/field/demo/style.less b/packages/react-vant/src/field/demo/style.less
@@ -13,6 +13,12 @@
   }
 }
 
+.demo-field-prefix {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
 .field_label {
   display: flex;
   align-items: center;

diff --git a/packages/react-vant/src/field/style/index.less b/packages/react-vant/src/field/style/index.less
@@ -179,6 +179,10 @@
     color: var(--rv-field-right-icon-color);
   }
 
+  &__prefix {
+    padding-right: var(--rv-padding-xs);
+  }
+
   &__button {
     padding-left: var(--rv-padding-xs);
   }