diff --git a/src/components/AttachmentUpload.vue b/src/components/AttachmentUpload.vue index 5dda161..7d096e8 100644 --- a/src/components/AttachmentUpload.vue +++ b/src/components/AttachmentUpload.vue @@ -92,9 +92,24 @@ export default { display: block; .upload-row { display: flex; - align-items: center; + /* 文件列表换行后,右侧提示文字仍与按钮首行对齐(不再整体垂直居中) */ + align-items: flex-start; + flex-wrap: wrap; } + /* + * Upload 根节点必须是 block,不能是 flex/inline-flex。 + * view-ui-plus 的 Upload 内部是两个兄弟节点: + * .ivu-upload-select(「选择文件」触发器) + ul.ivu-upload-list(已上传文件列表) + * 根节点一旦是 flex,作为 flex 项的 ul 就会被排到按钮同一行的右侧, + * 附件名紧贴按钮右边(即「附件在按钮旁边」)。改回 block 后, + * ul 恢复块级流,自然落到按钮下方一行。 + */ :deep(.ivu-upload) { + display: block; + flex: 0 1 auto; + } + /* 只让触发器内部水平对齐,不影响它的兄弟节点 */ + :deep(.ivu-upload-select) { display: inline-flex; align-items: center; } @@ -110,7 +125,8 @@ export default { margin-left: 10px; color: #f90; font-size: 12px; - line-height: 1; + /* 与「选择文件」按钮同高,保证首行视觉居中对齐 */ + line-height: 32px; } }