发现项目中使用的json生成表单插件ncform出现问题,所有字段下都默认显示"false"
解决方案:
新增一个函数
/**
* shield ncForm plugin error info: false
*/
shieldNCFormPluginBugInfo() {
let validList = document.getElementsByClassName("invalid-feedback");
setTimeout(() => {
for (let i = 0; i < validList.length; i++) {
if (validList[i].innerText.trim() === "false") {
console.log(validList[i].style.display);
validList[i].style.display = "none";
}
}
});
}
在挂载后和表单更改事件中调用
mounted() {
this.shieldNCFormPluginBugInfo();
}
handleFormChange({ paths, itemValue, oldItemValue }) {
this.shieldNCFormPluginBugInfo();
}
优化方案:
补充css样式解决闪烁问题
.invalid-feedback {
position: absolute;
opacity: 0;
max-width: 300px;
white-space: nowrap;
bottom: -21px;
animation: invalidTextAnimation 1s ease forwards;
}
@keyframes invalidTextAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
成功解决