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

展示组件

列表 TmCell

样式丰富常用警告提醒

🌶️ 示例

查看模拟效果
示例模板
vue
<template>
	<view>
		<tm-sheet>
			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">列表 tmCell</tm-text>
			<tm-text color="#999999">
				承载通用列表使用
			</tm-text>
		</tm-sheet>
		<tm-cell url="/pages/index/button" icon="apps-line" title="常见组件库"></tm-cell>
		<tm-cell url="/pages/index/icon" icon="archive-2-line" label="+¥32非卡片模式非卡片模式" label-color="red"
			icon-color="red"></tm-cell>
		<tm-cell title="APP赊购" url="/pages/index/tag" icon="price-tag-3-line" label="tmx测试"
			icon-color="green"></tm-cell>

		<tm-sheet :margin="['24']">
			<tm-text font-size="32" class=" text-weight-b d-block">非卡片模式 Cell</tm-text>
			<tm-text color="#999999">
				底边线可以左对齐或者右内对齐。
			</tm-text>
		</tm-sheet>

		<tm-sheet :padding="['0']" class="overflow">
			<tm-cell :bottomBorderInsert="true" :card="false" url="/pages/index/button" icon="stack-line"
				desc="UTS版本tmui组件库,高质量库" title="常见组件库"></tm-cell>
			<tm-cell title="程序设置" :bottomBorderInsert="true" :card="false" url="/pages/index/icon"
				icon="price-tag-3-line" label="+¥32" label-color="red" icon-color="red"></tm-cell>
			<tm-cell title="美丽的国度" :bottomBorderInsert="true" :card="false" icon="chat-smile-2-line"
				url="/pages/index/tag" label="tmx测试" icon-color="orange"></tm-cell>
			<tm-cell title="标签页面" :bottomBorderInsert="true" :card="false" :show-bottom-border="false"
				icon="calendar-schedule-line" url="/pages/index/tag" label="tmx测试" icon-color="orange"></tm-cell>
		</tm-sheet>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue"
</script>

<style></style>

🌶️ 兼容性

平台兼容

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

🌱 参数

参数名类型默认值描述
iconstring""左图标
avatarRoundstring"8"左侧图标、头像圆角。默认为8
colorstring'white'背景的主题色
darkColorstring''暗黑背景的主题色,空值时取sheetDarkColor
iconColorstring""图标色,空值时取全局主题值。
titlestring"标题"标题
titleColorstring"black"标题颜色
darkTitleColorstring"white"暗黑标题颜色,如果不填写取白
titleSizestring|number"32"标题大小
iconSizestring|number"42"左边图标大小
labelstring""右边文本
labelColorstring"#bfbfbf"右边文本颜色
labelSizestring|number"24"右侧label文字大小
descstring""标题正文的简介文本
showBottomBorderbooleantrue是否显示下边线
bottomBorderInsertbooleanfalse是否让下边线显示居右,不贯穿到左边。
bottomBorderColorstring""下边线的颜色。如果你设定了的话。暗黑的边颜色失效,采用你自定的颜色。
linkbooleantrue是否显示链接状态,有点按效果。包括出现右边跳转指示。关闭的话,事件反应和跳转会更快。如果true右侧箭头图标会显示
urlstring""需要跳转的页面地址。如果填写了右侧箭头图标会显示
openTypestring"navigate"-
cardbooleantrue是否是卡片模式
roundstring|number""卡片模式圆角,不填写采用全局的cardRadius属性值.
leftSizestring|number'60'左边图标区域宽和高的大小。
minHeightstring|number"88"最小高度,主要是用来统一风格高度不至于让点击范围过小如果你需要紧凑型可以设置为auto
lrPaddingstring|number"32"左右的间隙。
linkIconstring"arrow-right-s-line"-
tbPaddingstring|number"32"上下间隙
rightWidthstring|number"200"右侧最大宽

🌹 事件

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

🌽 slot插槽

插槽名数据描述
avatar名称:binding,icon 类型:string
头像图标
default-默认标题插槽
desc名称:binding,desc 类型:string
简介
label名称:binding,label 类型:string
右边文字
right-右插槽

🥗 ref方法

方法名参数返回值描述