Tui Plus Vapor

Appearance

t-cell ​

Cell 单元格

组件介绍 ​

t-cell 是一个列表组件，用于展示项目列表的UI元素，支持自定义边框、图标和文本样式，以及hover效果。组件提供了灵活的内容配置选项，包括左侧图标、标题、副标题、右侧描述和右侧图标等，适合需要展示列表项的场景。

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

基础用法参考 demo/cell/cell.uvue，通过 title、icon 等属性配置列表项内容。

vue
<template>
  <!-- 基础用法 -->
  <t-cell icon="map" title="欢迎使用Tui" class='mb-30 r-20' @click="onclick"></t-cell>
  
  <!-- 不同类型 -->
  <t-cell icon="map" title="欢迎使用Tui" type="info" effect="normal" class='mb-30 r-20' :disabled="true" @click="onclick"></t-cell>
  <t-cell icon="map" title="欢迎使用Tui" type="warning" effect="normal" class='mb-30 r-20' @click="onclick"></t-cell>
  <t-cell icon="map" title="欢迎使用Tui" type="primary" effect="normal" class='mb-30 r-20' @click="onclick"></t-cell>
  <t-cell icon="map" title="欢迎使用Tui" type="error" effect="normal" class='mb-30 r-20' @click="onclick"></t-cell>
  <t-cell icon="map" title="欢迎使用Tui" type="success" effect="normal" class='mb-30 r-20' @click="onclick"></t-cell>
  
  <!-- 不同效果 -->
  <t-cell icon="map" title="欢迎使用Tui" type="success" effect="normal" class='mb-30 r-20' @click="onclick"></t-cell>
  <t-cell icon="map" title="欢迎使用Tui" type="success" effect="dark" class='mb-30 r-20' @click="onclick"></t-cell>
  <t-cell icon="map" title="欢迎使用Tui" type="success" effect="normal" class='mb-30 r-20' @click="onclick"></t-cell>
  <t-cell icon="map" title="欢迎使用Tui" type="success" effect="light" class='mb-30 r-20' @click="onclick"></t-cell>
  <t-cell icon="map" title="欢迎使用Tui" type="success" effect="plain" class='mb-30 r-20' @click="onclick"></t-cell>
  
  <!-- 不同尺寸 -->
  <t-cell icon="map" title="欢迎使用Tui" type="success" effect="normal" size="large" class='mb-30 r-20'></t-cell>
  <t-cell icon="map" title="欢迎使用Tui" type="success" effect="dark" size="medium" class='mb-30 r-20'></t-cell>
  <t-cell icon="map" title="欢迎使用Tui" type="success" effect="normal" size="small" class='mb-30 r-20'></t-cell>
  <t-cell icon="map" title="欢迎使用Tui" type="success" effect="light" size="mini" class='mb-30 r-20'></t-cell>
  
  <!-- 图标+主题+插槽 -->
  <t-cell icon='/static/tabbar/ui1.png' class='mb-30 r-20' title="欢迎使用Tui" desc='+66' desc-class="c-red!"></t-cell>
  <t-cell icon='/static/tabbar/ui1.png' class='mb-30 r-20' title="欢迎使用Tui">
    <template v-slot:right>
      <t-button @click="onclick" icon-box-class="w-0!" type="success" size='mini'>取消</t-button>
    </template>
  </t-cell>
  
  <!-- 自定义样式 -->
  <t-cell icon='integral' class='mb-30 p-30 r-20' title="欢迎使用Tui" type="primary"></t-cell>
  <t-cell icon='integral' class='mb-30 h-150 r-20 plr-30!' icon-class="s-90! c-blue!" title-class="c-blue! s-60!" right-icon-class="s-60!" title="欢迎使用Tui" type="success"></t-cell>
</template>

<script setup>
function onclick() {
  console.log('欢迎使用Tui')
}
</script>

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'
border是否显示底部边框booleantrue
desc描述文本string''
descClass描述样式类any''
title标题文本string''
subTitle副标题文本string''
subTitleClass副标题样式类any''
titleClass标题样式类any''
icon图标，支持图标名称或图片路径string''
iconClass图标样式类any''
rightIcon右侧图标，支持图标名称或图片路径string'arrow-right'
rightIconClass右侧图标样式类any''

Events ​

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

Slots ​

插槽名说明
default默认插槽，用于放置标题和副标题内容
left左侧插槽，用于放置自定义图标内容
right右侧插槽，用于放置自定义内容