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

展示组件

图片 TmBadge

宽高可以设置,支持百分比,px,rpx,如果你用了auto,%这种就要注意:如果你把组件放到了容器中,容器设置为v-show,display:none,visible这种, 那你一定要跟随vif组件,不然尺寸是不对的。因为小程序无法监测这种变化的情况,导致无法设置尺寸。如果你设定了固定尺寸则不用担心这个问题。

🌶️ 示例

查看模拟效果
示例模板
vue
<template>
    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">图片 tmImage</tm-text>
        <tm-text color="#999999">
            图片自带加载功能,宽和高可以不设置,自动以父级宽度为最大值,如果只设置了宽,高会自动设置,免去了大家设置图片宽高的麻烦
            支持百分比,px,rpx单位宽高设置
        </tm-text>
    </tm-sheet>
    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b  d-block mb-16">自动占位宽和高</tm-text>
        <view class="flex flex-row" style="justify-content: space-between;align-items: flex-start;">
            <tm-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=183"></tm-image>
            <tm-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=0239"></tm-image>
            <tm-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=22233"></tm-image>
            <tm-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=9654"></tm-image>
            <tm-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=212"></tm-image>
        </view>
    </tm-sheet>
    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b  d-block mb-16">指定高宽</tm-text>
        <tm-image height="150" src="https://store.tmui.design/api_v2/public/random_picture?random=183"></tm-image>
        <tm-image width="100%" src="https://store.tmui.design/api_v2/public/random_picture?random=183"></tm-image>
        <tm-image width="120" height="120"
            src="https://store.tmui.design/api_v2/public/random_picture?random=183"></tm-image>
    </tm-sheet>
    <view class="py-32"></view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const testClick = (text: string) => {
    uni.showToast({ title: text, icon: "none" });
};
</script>
<style lang="scss"></style>

🌶️ 兼容性

平台兼容

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

🌱 参数

参数名类型默认值描述
widthstring|number"100%"宽度,默认100%18rpx,18px,15%支持这三种单位,如果只写"18"就表示18rpx
heightstring|number"auto"高度,auto,%,rpx,px,stringnumber18rpx,18px,15%支持这三种单位,如果只写"18"就表示18rpx
srcstring""图片源
modelstring"fill"模式
previewbooleantrue点击后是否预览图片
rationumber1.25预览占位比例宽/高,当数据没加载前,如果你设置了一项值比如宽,高会自动根据这个比例计算当图片加载成功后,使用正确的原图片比例设置。默认是5/4=1.25
roundstring|number'0'圆角
iconSizestring|number"36"加载和失败时的图标大小。
placeBgColorstring"#F5F5F5"占位背景色
placeDarkBgColorstring""点位暗黑时的背景,如果不填写默认填充inputDarkBgcolor
fadeShowbooleantrue是否显示过渡动画
lazybooleantrue图片懒加载
draggablebooleanfalse是否允许拖动。
showMenuByLongpressbooleanfalse-

🌹 事件

事件名参数返回数据描述
click---

🌽 slot插槽

插槽名数据描述

🥗 ref方法

方法名参数返回值描述