前言

Ant Design的Input组件的有一个状态的Api

需求

公司自研UI组件，在Antd的基础上进行开发。其中Input组件除了警告与错误状态外，还增加了成功的状态。如下图⬇️

开发实现

方案一：覆盖CSS样式

一开始准备通过判断状态来增加类名，在此类名下的input框中的颜色设置为成功的系列颜色。
即：在antd组件的API上，拓展一个API—successStatus：boolean，如果为true就给input一个类名，然后再css中，以这个类名为目标，修改input的相关样式实现成功的状态。
但是，感觉为了这样一个样式，增加一个专门的Api，感觉很冗余，而且万一以后有个什么其他的状态怎么办。在修改代码吗？除此之外，antd的样式比较复杂，各种个样的状态，如果要修改样式，能保证所有情况下样式都生效吗？
于是这种方案待定，看看有没有其他办法～

方案二：增加CSS样式

这个方案说来也巧，属于柳暗花明又一村了。
查看了警告以及错误的API，发现他们颜色的不同就是不同的类名控制的，如：警告是ant-input-status-warning，错误是ant-input-status-error，一个warning和一个error，和API的值是一样的。

那我传一个success会怎么样。

结果发现，类名变成了ant-input-status-success，那这样岂不是只写样式就可以了！
于是乎⬇️

  // 新增的成功状态的样式.ant-input-affix-wrapper-status-success {border-color: @success-color !important;}  .ant-input-affix-wrapper-status-success.ant-input-affix-wrapper-focused {box-shadow: 0 0 0 2px @success-color-outline !important;}

但是，当我以为能输任何值的时候，能自定义很多状态颜色的时候，随便输了个a，发现这种类名不见了，啊这～～～，算了，至少成功的状态有，先这么用着吧！

对了，使用的4.22.8的antd的版本，不知道以后的版本会是怎样的情况，请谨慎使用！！！

感谢观看！

基于Antd Input组件自定义Input的成功状态相关推荐

antd走马灯组件自定义前进后退按钮
antd走马灯组件自定义前进后退按钮[ts + react] antd的Carousel没有提供前进后退按钮需要自己根据文档实现此功能官方提供了next 和prev两个方法 next() 切换到下 ...
antd Tabs组件自定义头部
antd的Tabs组件,用renderTabBar自定义TabBar. 直接上代码: import React, { Fragment, useEffect, useState, useRef } f ...
antd tree组件自定义图标
把树的小三角替换为自定义图标,如下图效果 //小三角收起的背景图设置 ant-tree-switcher_close { width: 16px !important; height: 15px !i ...
支持大数据渲染下拉列表组件开发 SuperSelect(基于antd Select)
功能简介 antd 的 Select 组件不支持大数据量的下拉列表渲染,下拉列表数量太多会出现性能问题, SuperSelect 基于 antd 封装实现,替换原组件下拉列表,只渲染几十条列表数据,随 ...
纯生js ajax,纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件
现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...
React编写input组件传参共用onChange
之前写页面上的input比较少,所以没有单提出来一个组件,今天研究了下input组件,但共用一个onChange的问题卡了一会儿,查了下发现几个比较好的方法,分享下: 方法一 Input组件 let ...
微信input组件添加清除图标,点击清空不生效
微信小程序中使用input组件,点击上面的清空图标不生效问题问题原因:在真机调试中,因为微信小程序中input组件的层级在聚焦时会最高,会覆盖清空图标,所以点击不生效,在pc开发者工具中是不存在问题 ...
antd 给input设置值_Antd 中 Input 组件默认值的显示
1.input标签中有placeholder可以显示默认值但是有少量样式的问题(字体颜色会淡一点) placeholder属性 2.用Input组件中的defaultValue属性 defaultV ...
uniapp图片自适应_uni-app下input组件基于内容自适应宽度的实现
1.需求设计图是'单价'编辑项是input,随输入内容自己改变,前后有而fix(如果单位'￥/片'放后面那就好做多了):但是uni-app的input组件是有自定宽度的,而且试了好多css都很难控制 ...

基于Antd Input组件自定义Input的成功状态

前言

需求

开发实现

方案一：覆盖CSS样式

方案二：增加CSS样式

感谢观看！

基于Antd Input组件自定义Input的成功状态相关推荐

最新文章

热门文章