Skip to content
On this page
你当前查看的文档是tmui3.2.0(已不再支持NVUE)
[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

常用组件

布局Col TmCol

快速排版布局利器,内只能放置在父组件tmRow中

🌶️ 示例

查看模拟效果
示例模板
vue
<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">布局 TmRow TmCol</tm-text>
            <view>
                <tm-text>快速排版布局利器,内只能放置tmCol组件,默认是5列栅格,可以自行更改</tm-text>
            </view>
        </tm-sheet>
        <tm-sheet>
            <tm-row>
                <tm-col v-for="(index, item) in 5" :key="index"
                    :style="{ backgroundColor: `rgb(21, ${135 - item * 20}, ${235 - item * 20})` }"
                    class=" text-align-center py-24 text-white">{{ item }}</tm-col>
            </tm-row>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">上下左右间隙</tm-text>
            <tm-row gutter="2">
                <tm-col v-for="item in 10" :key="item" :style="{ backgroundColor: `rgb(230, ${item * 20}, ${165 - item * 20})` }"
                    class=" text-align-center py-24 text-white">{{ item % 5 == 0 ? 5 : item % 5 }}</tm-col>
            </tm-row>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">设置各自的栅格</tm-text>
            <tm-row>
                <tm-col v-for="(item, index) in [2, 1, 2, 5]" :key="item" :span="item"
                    :style="{ backgroundColor: `rgb(0, ${index * 20}, ${index * 20})` }"
                    class=" text-align-center py-24 text-white">{{ item }}</tm-col>
            </tm-row>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">改为10栅格</tm-text>
            <tm-row column="10">
                <tm-col v-for="(item, index) in [1, 3, 1, 5]" :key="item" :span="item"
                    :style="{ backgroundColor: `rgb(${item * 20}, ${95 - item * 20}, ${165 - item * 10})` }"
                    class=" text-align-center py-24 text-white">{{ item }}</tm-col>
            </tm-row>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">向右对齐</tm-text>
            <tm-row column="10" justify="flex-end">
                <tm-col v-for="(item, index) in [2, 5, 3, 3, 2]" :key="item" :span="item"
                    :style="{ backgroundColor: `rgb(0, ${index * 20}, ${index * 10})` }"
                    class=" text-align-center py-24 text-white">{{ item }}</tm-col>
            </tm-row>
        </tm-sheet>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
</script>
<style lang="scss" scoped></style>

🌶️ 兼容性

平台兼容

H5uniAPP小程序version
☑️☑️☑️☑️

🌱 参数

参数名类型默认值描述
spannumber|string1列宽,它是根据row定义的总列宽计算具体的宽度值。

🌹 事件

事件名参数返回数据描述
click--点击事件

🌽 slot插槽

插槽名数据描述
default-默认插槽

🥗 ref方法

方法名参数返回值描述