日常用法
<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;
}
}
效果图
网友评论