自定义组件文件图标与图片预览
自定义组件的文件图标，确实是个挺常见又容易忽略的小细节。前端页面里，像上传头像、预览文档、显示资源列表这种场景，几乎都少不了文件类型和图片的配合。你要是没做过这个功能，觉得挺简单：不就是判断后缀名、显示对应图片嘛？但真做起来，细节多得。
组件里的图片预览，最直接的用法就是用户上传文件，组件得知道怎么展示。.jpg、.png这些还能直接用</>标签搞定，但有些格式，比如<>.>、<>.>，你就得先判断能不能显示，不行就转换、降级。别忘了<>>也挺好用，预览前先读一下。</>
<><>图标显示</>算是更常见的需求，比如文件管理组件、资料库、后台上传列表，用户一看图标就知道文件类型，体验也好。通常建一套<>.>、<>.>这种类名，用<>>写成一套对应样式，或者干脆配个<>>图标集，一次引入，按类型切图。</>
<>逻辑也不复杂，<>>判断文件类型，比如用<>>拿到后缀，设置<>>或绑定图片路径。配合框架的话，用<>>></>或<>>{}</> 语法</>，都挺顺手的。</>
<>有时文件类型太多，一个一个写图标也不现实，这时候<>雪碧图</>或者<>>就能派上用场。前者节省求数，后者灵活、可样式化，自己看项目情况选就行。</>
<>如果你正好在做上传组件、文件列表或者后台资源管理，可以花点时间把这个功能封一封，之后用着省事儿。</>
文件大小：19.08KB
评论区