Vue组件开发系列之Align组件

一个让其内部子元素都水平垂直居中的组件

微信截图_20190807210716.png

演示地址：
http://widget-ui.cn/Align

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/Align

基本用法：

<div style="width:100px; height:100px; border: 1px solid #ccc; margin:10px;">
             <wt-align>
                <i class="icon-service"></i>
             </wt-align>
           </div>
           <div style="width:200px; height:200px; border: 1px solid #ccc; margin:10px;">
             <wt-align>
                这是一个居中组件
             </wt-align>
           </div>
           <div style="width:200px; height:200px; border: 1px solid #ccc; margin:10px;">
             <wt-align>
                <wt-image src="https://ss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/823.jpg" width="100px" height="100px" />
             </wt-align>
           </div>

组件结构：

<template>
    <div class='wt-align'>
        <slot></slot>
    </div>
</template>

css代码：

.wt-flex {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
     height: 100%;
 }

演示地址：
http://widget-ui.cn/Align

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/Align