解决方案:
当项目中需要给UI组件中的元素插入文字时,可以使用伪元素插入文字,调整样式
此处使用:after伪元素来插入文字
/* 在vue3项目中使用:deep+scope实现局部样式 */
:deep(.ant-upload-list-item-error:after) {
position: absolute;
content: '上传失败'; /* 插入的文字 */
bottom: 0;
left: 0;
background: rgba(217, 0, 27, 1);
width: 100%;
color: #fff;
text-align: center;
}
项目场景及效果:
在使用antdv的上传组件时,需求需要的错误的回显样式:
而antd vue所拥有的样式
更改效果: