首页 新闻 会员 周边 捐助

vue表单验证插件或者这个功能有做过的吗

0
[已解决问题] 解决于 2022-02-09 16:30

其实就类似下面这个功能

但是还需要,input 边框变红色,现在的做法就是每个input都被包裹了一个Tooltip 控件,改的贼难受

永远跟党走i的主页 永远跟党走i | 小虾三级 | 园豆:1542
提问于:2022-02-08 18:55
< >
分享
最佳答案
0

处理好了

使用 Ant Design 框架的
vue3
最终效果

后面是直接修改css变成类似效果的

.ant-form-item-explain.ant-form-item-explain-success>div,
.ant-form-item-explain.ant-form-item-explain-error>div {   
   position: absolute;
  left: calc(-3% + 8px);
  top: calc(-78% - 0px);
  transform: translateY(-50%);
  width: max-content;
  max-width: 120px;
  display: none;
  color: #fff;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 4px;
  z-index: 999; 
}
.ant-form-item-control-input:hover + .ant-form-item-explain > div {
  display: block;
}


.ant-form-item-explain.ant-form-item-explain-error>div 
{  
  background:  rgb(255 77 79);
}

.ant-form-item-has-error .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector ,
.ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant-input, .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper, .ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover, .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover{
  background-color: #fff1f1 !important;
}

.ant-form-item-explain.ant-form-item-explain-error>div:after {
  content: "";
  border: 8px solid transparent;
  border-right-color: rgb(255 77 79);
  position: absolute;
  left: 0px;
  top: 53%;
  margin-top: 15px;
  transform: rotate(270deg);
}

.ant-form-item-explain.ant-form-item-explain-success,
.ant-form-item-explain.ant-form-item-explain-error { 
  display: contents;
}

永远跟党走i | 小虾三级 |园豆:1542 | 2022-02-09 16:30
其他回答(2)
0

这个是什么UI框架?要看它的 form 组件的 validation 功能,你说的这个需求一般在 form组件提供,不需要自己去包裹 tooltip

wang_yb | 园豆:4893 (老鸟四级) | 2022-02-09 11:32
0

不用框架直接写感觉会来的快一些

书昀 | 园豆:1072 (小虾三级) | 2022-02-09 14:24
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册