Tui Plus Vapor

Appearance

t-async-height ​

AsyncHeight 异步高度

组件介绍 ​

t-async-height 用于在相同分组内保持多个组件高度一致，自动同步组内最大高度。适用于卡片列表、网格布局等需要保持高度统一的场景。

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

基础用法参考 demo/async-height/async-height.uvue，通过 group 属性将需要同步高度的组件分组。

vue
<template>
  <view class="async-height-demo">
    <t-row>
      <t-col span="12">
        <t-async-height group="card-group">
          <view class="card">
            <text class="title">卡片标题1</text>
            <text class="desc">这是卡片描述内容，内容较短</text>
          </view>
        </t-async-height>
      </t-col>
      <t-col span="12">
        <t-async-height group="card-group">
          <view class="card">
            <text class="title">卡片标题2</text>
            <text class="desc">这是卡片描述内容，这段内容比较长，需要占据更多空间</text>
          </view>
        </t-async-height>
      </t-col>
    </t-row>
  </view>
</template>

<style scoped>
.async-height-demo {
  padding: 20rpx;
}
.card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 10rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}
.desc {
  font-size: 28rpx;
  color: #666;
}
</style>

Props ​

属性名说明类型默认值
path点击组件后跳转的页面路径；为空时仅响应事件string''
hover是否启用点击效果booleantrue
type组件主题类型，可选 info、primary、error、warning、successstring''
disabled是否禁用booleanfalse
effect组件显示主题，可选 normal、dark、light、plainstring'normal'
size组件尺寸，可选 large、medium、small、ministring'mini'
group分组标识，相同 group 的组件会同步高度string''

Events ​

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

Slots ​

插槽名说明
default需要同步高度的内容