2019-04-22  本文已影响0人  chenjieyi

日常用法
<fieldset disabled>
常用于控制表单的不可编辑,fieldset元素设置disabled,其内的表单元素都会被设置为disabled状态,并且拦截表单的键盘事件,如回车提交表单。通常还结合css的:disabled设置表单disabled状态的样式
使用场景:当表单为编辑,查看的共用组件,那么仅仅只是查看表单详情时,可在fieldset元素添加属性disabled。

      <Form>
        <fieldset disabled>
          <FormItem label="用户名" {...formItemLayout}>
            <Input placeholder="请输入用户名" />
          </FormItem>
          <FormItem label="邮箱" {...formItemLayout}>
            <Input type="email" placeholder="请输入正确的邮箱格式,如:xxx@qq.com" />
          </FormItem>
          <FormItem label="网址" {...formItemLayout}>
            <Input placeholder="请输入真实的网址" />
          </FormItem>
        </fieldset>
      </Form>

  // 样式
    input {
      &:disabled {
        background: #eee;
        cursor: not-allowed;
      }
    }
效果图
上一篇 下一篇

猜你喜欢

热点阅读