展示组件
图片 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>🌶️ 兼容性
平台兼容
| H5 | uniAPP | 小程序 | version |
|---|---|---|---|
| ☑️ | ☑️ | ☑️ | ☑️ |
🌱 参数
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| width | string|number | "100%" | 宽度，默认100%18rpx,18px,15%支持这三种单位，如果只写"18"就表示18rpx |
| height | string|number | "auto" | 高度,auto,%,rpx,px,stringnumber18rpx,18px,15%支持这三种单位，如果只写"18"就表示18rpx |
| src | string | "" | 图片源 |
| model | string | "fill" | 模式 |
| preview | boolean | true | 点击后是否预览图片 |
| ratio | number | 1.25 | 预览占位比例宽/高，当数据没加载前，如果你设置了一项值比如宽，高会自动根据这个比例计算当图片加载成功后，使用正确的原图片比例设置。默认是5/4=1.25 |
| round | string|number | '0' | 圆角 |
| iconSize | string|number | "36" | 加载和失败时的图标大小。 |
| placeBgColor | string | "#F5F5F5" | 占位背景色 |
| placeDarkBgColor | string | "" | 点位暗黑时的背景，如果不填写默认填充inputDarkBgcolor |
| fadeShow | boolean | true | 是否显示过渡动画 |
| lazy | boolean | true | 图片懒加载 |
| draggable | boolean | false | 是否允许拖动。 |
| showMenuByLongpress | boolean | false | - |
🌹 事件
| 事件名 | 参数 | 返回数据 | 描述 |
|---|---|---|---|
| click | - | - | - |
🌽 slot插槽
| 插槽名 | 数据 | 描述 |
|---|
🥗 ref方法
| 方法名 | 参数 | 返回值 | 描述 |
|---|