标签：12 defineComponent Ant 栅格 Vue background 对齐 col

栅格系统的设计理念

建议横向排列的盒子数量最多四个，最少一个。
因此我们的span一般设置为3或者4
小屏幕的话就另当别论了

栅格系统的简单介绍

1.通过row在水平方向建立一组column（简写 col）
你的内容应当放置于col内，并且只有col可以作为row的直接元素。
这个非常重要
<a-row>
    <a-col></a-col>
</a-row>

2.栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。
<a-row>
    <a-col :span="12">col-12</a-col>
    <a-col :span="12">col-12</a-col>
</a-row>
这个表示一行显示2列  24/12=2

3.如果一个row中的col总和超过 24.
那么多余的`col`会作为一个整体另起一行排列

4.栅格化系统支持 Flex 布局
允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。
子元素与子元素垂直方向上：支持顶部对齐、垂直居中对齐、底部对齐的方式。
同时，支持使用 order 来定义元素的排列顺序。

栅格系统的简单使用

<template>
   <div>
       <!-- 每行显示4列 -->
       <a-row class="arow-one">
           <a-col :span="6" class="left1">col-6</a-col>
           <a-col :span="6" class="left2">col-6</a-col>
           <a-col :span="6" class="left3">col-6</a-col>
           <a-col :span="6" class="left4">col-6</a-col>
       </a-row>

       <!-- 每行显示2列 -->
       <a-row class="arow-one">
           <a-col :span="12" class="left12">col-12</a-col>
           <a-col :span="12" class="right12">col-12</a-col>
       </a-row>

       <!-- 每行显示3列 -->
       <a-row class="arow-one">
           <a-col :span="8" class="left8">col-8</a-col>
           <a-col :span="8" class="center8">col-8</a-col>
           <a-col :span="8" class="right8">col-8</a-col>
       </a-row>

       <!-- 
           lg	≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	
           xl	≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-
           xxl	≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 
            这里是响应式的； 你可以改变可视区域看一下
        -->
       <a-row class="arow-one">
           <a-col :xxl="6" :xl="8" :lg="12" class="left1">col-6</a-col>
           <a-col :xxl="6" :xl="8" :lg="12" class="left2">col-6</a-col>
           <a-col :xxl="6" :xl="8" :lg="12" class="left3">col-6</a-col>
           <a-col :xxl="6" :xl="8" :lg="12" class="left4">col-6</a-col>
       </a-row>
   </div>
</template>
<script lang="ts">
import { computed, defineComponent, } from 'vue';
export default defineComponent({
   setup() {
       return {

       };
   },
});
</script>
<style scoped lang="scss">
.arow-one {
   height: 80px;

   .left12 {
       background: palegoldenrod;
   }

   .right12 {
       background: pink;
   }
}

.left8 {
   background: red;
}

.center8 {
   background: rgb(133, 58, 71);
}

.right8 {
   background: #f7f7f7;
}

.left1 {
   background: #23a81f;
}

.left2 {
   background: #08cfc9;
}

.left3 {
   background: #088baf;
}

.left4 {
   background: #247c06;
}
</style>

栅格系统排列表单

<template>
    <!-- 每行显示4列 -->
    <a-row class="box" :gutter="40"  align="center">
        <a-col :span="6">
            <a-form-item label="Field A">
                <a-input :label-col="labelCol" v-model:value="formState.fieldA" placeholder="input placeholder" />
            </a-form-item>
        </a-col>

        <a-col :span="6">
            <a-form-item label="Field B">
                <a-input v-model:value="formState.fieldB" placeholder="input placeholder" />
            </a-form-item>
        </a-col>

        <a-col :span="6">
            <a-form-item label="Activity zone">
                <a-select v-model:value="formState.region" placeholder="please select your zone">
                    <a-select-option value="shanghai">Zone one</a-select-option>
                    <a-select-option value="beijing">Zone two</a-select-option>
                </a-select>
            </a-form-item>
        </a-col>

        <a-col :span="6">
            <a-form-item>
                <a-button type="primary">搜索</a-button>
                <a-button style="margin-left: 10px">取消</a-button>
            </a-form-item>
        </a-col>
    </a-row>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, } from 'vue';
export default defineComponent({
    setup() {
        let formState = reactive({
            fieldA: '',
            fieldB: '',
            region: ''
        })
        return {
            formState,
            labelCol: { span: 4 },
        };
    },
});
</script>
<style scoped lang="scss">
.box {
    background: pink;
    // 垂直居中
    .ant-form-item{
        margin-top: 24px;
    }
}
</style>

标签：12,defineComponent,Ant,栅格,Vue,background,对齐,col
来源： https://www.cnblogs.com/IwishIcould/p/16411517.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。