• 一. 需求
• 二. 设计
• 三. 问题及解决方案
• 四. demo
• 五. 空组件代码

一. 需求

为开发一个空状态通用组件，需要将所有内容水平垂直居中，还需要横向纵向排列，故选择flex布局。

1. 组件内容分为三部分，图片、文字、其他（插槽）
2. 默认状态，组件排列方式为纵向，图片307*145，所有内容水平垂直居中。
3. 容器宽高任一小于330px，假设宽大于高组件排列方式变为横向，图片大小变为70px；否则维持默认。
4. 容器宽高任一小于120px，组件只显示文字和其他。

二. 设计

1. 组件最外层为自适应宽高，完全由内容撑开。
2. 开放属性：
   1.类别：默认、横向、纵向、只有文字
   2.内置图片高度
   3.内置图片选择
   4.文字替换

三. 问题及解决方案

问题：当组件内容宽高大于组件设置的宽高，会导致内容显示不完整，Flex 子元素居中，溢出滚动后被裁切的问题。
个人解决方案：使用两层flex，外层只设置align-items: center;，内层设置align-items: center;justify-content: center;flex-shrink: 0;居中和不让内容缩放,重点设置margin: auto;设置居中，消除flex影响。

四. demo

    
    
    
    




    
消除flex居中后,子元素内容显示不完整 
    

        

            

                

                    

                
                

                    
提示文字
                
                

                    
其他
                
            
        
    

五. 空组件代码