你当前查看的文档是 tmui 3.2.0（已不再支持 NVUE）

tmui 3.1.x nvue tmui 4.x uni-app x

常用组件

布局Col TmCol

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

🌶️ 示例

查看模拟效果－

示例模板

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

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
span	number|string	1	列宽，它是根据row定义的总列宽计算具体的宽度值。

🌹 事件

事件名	参数	返回数据	描述
click	名称：evt,事件参数,	-	点击事件

🌽 slot插槽

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

🥗 ref方法

方法名	参数	返回值	描述