首页 > 其他 > 详细

antd 将form表单中的label换行。form表单中的input框只有border-bottom

时间:2021-04-23 16:36:29      阅读:834      评论:0      收藏:0      [点我收藏+]

修改前:

技术分享图片

修改后:

技术分享图片

代码片段:

<Form
  name="basic5"
  initialValues={{ remember: true }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
  size="large"
  form={form}
  labelCol={{ style: { width: ‘100%‘, height: ‘30px‘ } }} //label样式
  labelAlign="left" //label样式
>
  <Form.Item
    name="username"
    validateFirst
    label="新手机号"
    rules={[
      { required: true, message: ‘请输入手机号‘ },
      {
        validator: (_, value) => {
          return validate.phone(value) ? Promise.resolve() : Promise.reject(‘手机号格式错误‘);
        }
      }
    ]}
  >
    <Input
      maxLength={11}
      placeholder="请输入手机号"
      allowClear
      style={{ borderTop: ‘none‘, borderLeft: ‘none‘, borderRight: ‘none‘ }}
    />
  </Form.Item>
  <Form.Item
    name="code"
    validateFirst
    rules={[
      { required: true, message: ‘请输入验证码‘ },
      {
        required: true,
        validator: (_, value) => {
          return validate.onlyNum(value)
            ? Promise.resolve()
            : Promise.reject(‘请输入4位纯数字验证码‘);
        }
      }
    ]}
    label="验证码"
  >
    <Input
      className="captcha-input"
      placeholder="请输入验证码"
      style={{ borderTop: ‘none‘, borderLeft: ‘none‘, borderRight: ‘none‘ }}
      suffix={
        <Button
          className="captcha"
          style={{ background: ‘transparent‘, outline: ‘none‘ }}
          disabled={disabled}
          onClick={getCodes}
        >
          获取验证码
        </Button>
      }
    />
  </Form.Item>
  />
</Form>;

 

antd 将form表单中的label换行。form表单中的input框只有border-bottom

原文:https://www.cnblogs.com/cocozj945/p/14692750.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!