Tui Plus Vapor

Appearance

t-col ​

Col 列

组件介绍 ​

t-col 是一个纵向布局容器组件，默认使用 Flex 纵向布局，是 Layout 分栏布局系统的重要子组件。与 t-row 组件配合使用，构建灵活的栅格布局系统。支持列宽控制、列偏移和列间距等功能，基于 24 栅格系统，适合需要精细控制布局的场景。

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

基础用法参考 demo/col/col.uvue，与 t-row 组件配合使用，通过 span 属性控制列宽。

vue
<template>
  <!-- 基础分栏布局 -->
  <t-row class="mb-15">
    <t-col :span="8">
      <t-row :class="[`tbg-s`,'w-100% h-60px fc']">
        <text class="c-#fff">8</text>
      </t-row>
    </t-col>
    <t-col :span="8">
      <t-row :class="[`tbg-e`,'w-100% h-60px fc']">
        <text class="c-#fff">8</text>
      </t-row>
    </t-col>
    <t-col :span="8">
      <t-row :class="[`tbg-s`,'w-100% h-60px fc']">
        <text class="c-#fff">8</text>
      </t-row>
    </t-col>
  </t-row>
  
  <!-- 四列布局 -->
  <t-row class="mb-15">
    <t-col :span="6">
      <t-row :class="[`tbg-e`,'w-100% h-60px fc']">
        <text class="c-#fff">6</text>
      </t-row>
    </t-col>
    <t-col :span="6">
      <t-row :class="[`tbg-s`,'w-100% h-60px fc']">
        <text class="c-#fff">6</text>
      </t-row>
    </t-col>
    <t-col :span="6">
      <t-row :class="[`tbg-e`,'w-100% h-60px fc']">
        <text class="c-#fff">6</text>
      </t-row>
    </t-col>
    <t-col :span="6">
      <t-row :class="[`tbg-s`,'w-100% h-60px fc']">
        <text class="c-#fff">6</text>
      </t-row>
    </t-col>
  </t-row>
  
  <!-- 分栏偏移 -->
  <t-row class="mb-15">
    <t-col :span="5">
      <t-row :class="[`tbg-s`,'w-100% h-60px fc']">
        <text class="c-#fff">5</text>
      </t-row>
    </t-col>
    <t-col :span="5" :offset="2">
      <t-row :class="[`tbg-e`,'w-100% h-60px fc']">
        <text class="c-#fff">5</text>
      </t-row>
    </t-col>
    <t-col :span="7" :offset="5">
      <t-row :class="[`tbg-e`,'w-100% h-60px fc']">
        <text class="c-#fff">7</text>
      </t-row>
    </t-col>
  </t-row>
  
  <!-- 间距 -->
  <t-row>
    <t-col :span="6" :gutter="6">
      <t-row :class="[`tbg-e`,'w-100% h-60px fc']">
        <text class="c-#fff">6</text>
      </t-row>
    </t-col>
    <t-col :span="6" :gutter="6">
      <t-row :class="[`tbg-s`,'w-100% h-60px fc']">
        <text class="c-#fff">6</text>
      </t-row>
    </t-col>
    <t-col :span="6" :gutter="6">
      <t-row :class="[`tbg-e`,'w-100% h-60px fc']">
        <text class="c-#fff">6</text>
      </t-row>
    </t-col>
    <t-col :span="6" :gutter="6">
      <t-row :class="[`tbg-s`,'w-100% h-60px fc']">
        <text class="c-#fff">6</text>
      </t-row>
    </t-col>
  </t-row>
</template>

Props ​

属性名说明类型默认值
path点击组件后跳转的页面路径；为空时仅响应事件string''
hover是否启用点击效果booleanfalse
type组件主题类型，可选 info、primary、error、warning、successstring''
disabled是否禁用booleanfalse
effect组件显示主题，可选 normal、dark、light、plainstring'normal'
size组件尺寸，可选 large、medium、small、ministring'medium'
span列的宽度，单位为百分比，基于 24 栅格系统number0
offset列的偏移量，单位为百分比，基于 24 栅格系统number0
gutter列间距，单位为像素number0

Events ​

事件名说明回调参数
click点击时触发-
transitionend动画结束时触发-
initFinished组件初始化完成时触发，返回组件节点信息-
touchstart触摸开始时触发-
touchend触摸结束时触发-
touchmove触摸移动时触发-
touchcancel触摸取消时触发-

Slots ​

插槽名说明
default默认插槽，用于放置列内容